CSS3景深、三维变换属性及旋转三维立方体的实现

1、©1()奇酷学院I I、XZ QIKUEDU.COMCSS3景深、三维变换属性及旋转三维立方体的实现三维立体效果我觉得是 CSS3中最有意思的地方， 不得不佩服那些开发者大神们，让我们能够通过几行CSS代码就能得到酷炫的视觉体验。浏览器坐标系在讲正式语法之前，首先需要了解浏览器坐标系，这需要我们把浏览器界面想象成一个立体的场景。+ ¥这是网上流传很广的浏览器坐标系图片， 从左到右的方向是浏览器 x轴的正方向，从上到下 的方向是浏览器y轴的正方向，而z轴正方向是面对于我们的， 了解这个很重要，因为下面 我们旋转元素需要借助它来理解。©1（）奇酷学院I I、QIKUE

2、DU.COM3D旋转我们在平面中使用的旋转只是单纯的让元素在平面旋转一定角度，在三维旋转中稍微要复杂一些，属性当然还是用我们的 transform ，三维旋转有下面三个函数分别对应三个维度的旋转：*rotateX（ xxdeg）«rotateY（ xxdeg）«rotateZ（ xxdeg）rotateX是让元素绕着x轴旋转，角度越大，元素绕着x轴顺时针旋转，类似于我们的单杠运动。tran sform: rotateX（45deg）;rotateY是让元素绕着y轴旋转，角度越大，元素绕着y轴顺时针旋转，类似于钢管舞运动)奇酷学院I l|、QIKUEDU.COMtran sf

3、orm: rotateY(45deg);rotateZ是让元素绕着z轴旋转，角度越大，元素绕着z轴顺时针旋转，这就是我们在二维平面的旋转，类似于转盘tran sform: rotateZ(45deg);©1()奇酷学院I I、V-Z QIKUEDU COM其实3D旋转还有一个合成的函数是rotate3d(num,num,num,deg),用的不是很多，我就简单说一下，参数并不是我们想那样的3个角度值，而是三个数字一个角度值，前三个数字分别表示绕x、y、z轴旋转的矢量值，最后一个表示在空间的旋转角度，等价关系如下 rotate3d(1,0,0,xxdeg) <=> rota

4、teX(xxdeg)rotate3d(0,1,0,xxdeg) <=> rotateY(xxdeg)rotate3d(0,0,1,xxdeg) <=> rotateZ(xxdeg)3D位移与3D缩放我们在2D中用到translateX()和translateY()在平面移动，3D中我们多了 translateZ()允许我们沿着z轴平移，同样可以使用合成函数translate3d(x,y,z)，注意前两个值可以使用百分比形式，但是沿 z轴平移的值只能使用长度值。同理我们的3D缩放 scaleX(num) 、scaleY(num) 、scaleZ(num) 、scale3d

5、(num,num,num)©1()奇酷学院I I、QIKUEDU COMI至于它们的用法下面再通过例子来说，（3D的倾斜属性是不存在的，换句话说，不存在skew3d 函数）透视/景深属性perspective景深这个名词，维基百科是这样就解释的景深（英语：Depth of field, DOF）景深是指相机对焦点前后相对清晰的成像范围。在光学中，尤其是录影或是摄影，是一个描述在空间中，可以清楚成像的距离范围。虽然透镜只能够将光聚到某一固定的距离，远离此点则会逐渐模糊，但是在某一段特定的距离内，影像模糊的程度是肉眼无法察觉的，这段距离称之为景深。当焦点设在超焦距处时，景深会从超焦距的一

6、半延伸到无限远，对一个固定的光圈值来说，这是最大的景深。（看到这里，我的手默默的离开了键盘，仰天长叹，心想，这到底要什么样的学历才能看得懂）我们可以这样来理解，景深就是我们的肉眼距离显示器的距离，景深越大，元素离我们越远,效果就不好，在我们 CSS3中，perspective 用于激活一个3D空间，属性值就是景深大小（默认none无景深），有两种用法.stage perspective: 500px;应用景深的元素称为“舞台元素”，舞台元素的所有后代元素都会受影响，（如果后代元素中也添加了 perspective 属性，效果会叠加而不是覆盖）©11()奇酷学院I J、QIKUEDU.

7、COM<div class="stage"><div class="demo"></div></div>.stage width: 200px;height: 200px;border: 1px solid black;margin: 100px auto;.stage .demo width: 200px;height: 200px;backgro un d-color: oran gered; tran sform: rotateX(45deg);在这个例子中，我们把内部元素绕x轴旋转了 45。后，由于

8、他只是在二次元旋转，所以我们根本看不出来它旋转，但是我们现在加个景深©11()奇酷学院I I、QIKUEDU.COM.stage width: 200px;height: 200px;border: 1px solid black;margin: 100px auto;perspective: 500px; /*增 */.stage .demo width: 200px;height: 200px;backgro un d-color: oran gered;tran sform: rotateX(45deg);500px，由于这就相当于我们在舞台元素的中心位置往里看，这个子元素距离

9、我们肉眼有 子元素的顺时针旋转，元素上半部分离我们远，所以看起来很小，元素下半部分离我们近, 所以看起来稍大，这样就会产生很强的立体感©11()奇酷学院I I、QIKUEDU.COM的位置是可以调整，也就是舞台元素刚才我说道我们的肉眼相当于在舞台元素中心的位置，其实这个“眼睛”的，这用到了 perspective-origin属性，默认的属性值就是50% 50%的中心位置，我们可以尝试调整视角。.stage width: 200px;height: 200px;border: 1px solid black;margin: 100px auto;perspective: 500px;

10、perspective-origi n: 10px 10px; /*增 */.stage .demo width: 200px;height: 200px;backgro un d-color: oran gered;tran sform: rotateX(45deg);©1()奇酷学院I I、QIKUEDU.COM这就相当于在舞台元素的距离原点（左上）10px , 10px的位置往里看，理解这个需要我们一定的空间立体感AssumedEye Position注意：景深大小一定要比你的动画元素大（我们不可能看到眼睛后面的东西）景深的另一种用法， 是应用在动画元素（不是舞台元素）变形的函

11、数中，和其他变形函数写 在一起.stage .demo tran sform: rotateX(45deg) perspective(IOOpx);©1()奇酷学院I I、/ QIKUEDU.COM3D 属性 transform-style这个属性指定了子元素如何在空间中展示，只有两个属性值：flat （默认）和preserve-3d ,flat表示所有子元素在 2D平面呈现，preserve-3d表示所有子元素在 3D平面呈现，（prederve 是保护、维持的意思，preserve-3d就是保持三维空间的意思），当然如果我们想要 3D 的效果，就要使用transform-styl

12、e: preserve-3d;这个属性只是针对设置属性元素的子元素如何展示，而对子元素的子元素无效，而且对于设置了 overflow: hidden;的元素，设置 3D效果会失效，道理很简单，跳出了父元素平面的子元素无法显示了，结果自然还是2D效果，应用于这个属性的元素我们称作“容器”，这个属性我们下面通过一个例子再来体会背面可见属性 backface-visibilityvisibility(默认)通过这个元素我们可以指定当元素背对我们时是否可见，只有两个属性值 和hidden，如果我们希望元素背对我们不可见，就这样设置.demo backface-visibility: hidde n;F

13、面我通过一个例子来把上面讲到的属性全部实践一下示例：旋转的三维立方体<div class="stage"><!-舞台元素，视角所在->©1()奇酷学院I I、V-Z QIKUEDU.COM!<ul class="three-d-box"><!-动画容器，通过它来控制整个立方体-><li> ?</li><!-动画元素，立方体的六个面-><li> ?</li><li> ?</li><li> ?</li

14、><li> ?</li><li> ?</li></ul></div>ul /* 调整ul标签的样式，取消内边距、外边距，和 点”样式*/padd ing: 0;margi n: 0;list-style-type: none;.stage /*设置舞台元素在屏幕居中，设置合适的景深大小*/positi on: relative;width: 800px;height: 800px;margin: 100px auto;perspective: 800px;keyframes move /*设置动画关键帧*/0% tr

15、an sform: rotateX(Odeg);25% tran sform: rotateX(180deg);50% tran sform: rotateX(360deg) rotateY(Odeg);75% tran sform: rotateX(360deg) rotateY(180deg);©1()奇酷学院I I、V-Z QIKUEDU.COM100% tran sform: rotateX(360deg) rotateY(360deg);.stage .three-d-box /*动画容器居中在舞台元素中间*/width: 200px;height: 200px;posit

16、i on: absolute;left: 50%;top: 50%;margi n: -100px 0 0 -100px;transform-style: preserve-3d; /*设置3D属性让子元素三维空间呈现 */animation: move 3s linear infinite; /*设置动画 */.stage .three-d-box>li /*设置动画子元素公共属性*/positi on: absolute;width: 200px;height: 200px;left: 0;top: 0;fon t-size: 50px;lin e-height: 200px;tex

17、t-alig n: cen ter;opacity: 0.5;/*为了保证我们对立方体位置的控制，我们需要让动画容器在立方体的中间位置*/.stage .three-d-box>li: nth-child(1) backgro un d-color: red;tran sform: tran slateZ(-100px);.stage .three-d-box>li: nth-child(2) ©1()奇酷学院I I、QIKUEDU.COMbackgro un d-color: gree ny ellow;tran sform: tran slateZ(100px);.s

18、tage .three-d-box>li: nth-child(3) backgro un d-color: corn flowerblue;tran sform: rotateX(90deg) tran slateZ(100px);.stage .three-d-box>li: nth-child(4) backgro un d-color: oran gered;tran sform: rotateX(-90deg) tran slateZ(100px);.stage .three-d-box>li: nth-child(5) backgro un d-color: deepp ink;tran sform: rotateY(90deg) tran slateZ(100px);.stage .three