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

CSS3景深、三维变换属性及旋转三维立方体的实现三维立体效果我觉得是CSS3中最有意思的地方，不得不佩服那些开发者大神们，让我们能够通过几行CSS代码就能得到酷炫的视觉体验。浏览器坐标系在讲正式语法之前，首先需要了解浏览器坐标系，这需要我们把浏览器界面想象成一个立体的场景。这是网上流传很广的浏览器坐标系图片，从左到右的方向是浏览器x轴的正方向，从上到下的方向是浏览器y轴的正方向，而z轴正方向是面对于我们的，了解这个很重要，因为下面我们旋转元素需要借助它来理解。3D旋转我们在平面中使用的旋转只是单纯的让元素在平面旋转一定角度，在三维旋转中稍微要复杂一些，属性当然还是用我们的transform，三维旋转有下面三个函数分别对应三个维度的旋转：rotateX（xxdeg）rotateY（xxdeg）rotateZ（xxdeg）rotateX是让元素绕着x轴旋转，角度越大，元素绕着x轴顺时针旋转，类似于我们的单杠运动。transform: rotateX(45deg);rotateY是让元素绕着y轴旋转，角度越大，元素绕着y轴顺时针旋转，类似于钢管舞运动..transform: rotateY(45deg);rotateZ是让元素绕着z轴旋转，角度越大，元素绕着z轴顺时针旋转，这就是我们在二维平面的旋转，类似于转盘transform: rotateZ(45deg);其实3D旋转还有一个合成的函数是rotate3d(num,num,num,deg)，用的不是很多，我就简单说一下，参数并不是我们想那样的3个角度值，而是三个数字一个角度值，前三个数字分别表示绕x、y、z轴旋转的矢量值，最后一个表示在空间的旋转角度，等价关系如下rotate3d(1,0,0,xxdeg) == rotateX(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(num,num,num)至于它们的用法下面再通过例子来说，（3D的倾斜属性是不存在的，换句话说，不存在skew3d函数）透视/景深属性perspective景深这个名词，维基百科是这样就解释的景深（英语：Depth of field, DOF）景深是指相机对焦点前后相对清晰的成像范围。在光学中，尤其是录影或是摄影，是一个描述在空间中，可以清楚成像的距离范围。虽然透镜只能够将光聚 到某一固定的距离，远离此点则会逐渐模糊，但是在某一段特定的距离内，影像模糊的程度是肉眼无法察觉的，这段距离称之为景深。当焦点设在超焦距处时，景深 会从超焦距的一半延伸到无限远，对一个固定的光圈值来说，这是最大的景深。（看到这里，我的手默默的离开了键盘，仰天长叹，心想，这到底要什么样的学历才能看得懂）我们可以这样来理解，景深就是我们的肉眼距离显示器的距离，景深越大，元素离我们越远，效果就不好，在我们CSS3中，perspective用于激活一个3D空间，属性值就是景深大小（默认none无景深），有两种用法.stage { perspective: 500px;}应用景深的元素称为“舞台元素”，舞台元素的所有后代元素都会受影响，（如果后代元素中也添加了perspective属性，效果会叠加而不是覆盖）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; background-color: orangered; transform: rotateX(45deg);}在这个例子中，我们把内部元素绕x轴旋转了45°后，由于他只是在二次元旋转，所以我们根本看不出来它旋转，但是我们现在加个景深.stage { width: 200px; height: 200px; border: 1px solid black; margin: 100px auto; perspective: 500px;