CSS3 3D变换

可以这么说，3D变换是基于三维坐标系的。以下是“盗用”的图

CSS3中的3D变换主要包括以下几个功能函数：

• 3D位移：包括translateZ()和translate3d()；
• 3D旋转：包括rotateX()、rotateY()、rotateZ()和rotate3d()；
• 3D缩放：包括scaleZ()和scale3d()；
• 3D矩阵：matrix3d()；

一、translate3d()

具体的css使用为

transform: translate3d(tx, ty, tz);

　　tx、ty、tz应该不用多介绍了。

 二、translateZ()

让元素在3D空间沿Z轴进行位移。具体的css使用为

transform: translateZ(t);

当t为负值的时候，意味着元素在Z轴越移越远，我们人眼看到的就是元素变得越来越小。反之，元素在Z轴越移越近，导致元素变得越大。

translateZ()等同于translate3d(0,0,tz)。

三、rotateX()、rotateY()、rotateZ()和rotate3d()

rotateX(a)、rotateY(a)、rotateZ(a)函数让一个元素围绕X、Y、Z轴旋转。a表示旋转角度值。若为正值，元素顺时针旋转；反之为逆时针。

rotate3d(x,y,z,a)，其中，

x（y）（z）取值为0~1的数值，用来描述元素围绕X（Y）（Z）轴旋转的矢量值；

a为角度值，指定元素的空间旋转角度。

当x，y，z三个值同时为0时，元素的3D空间不做任何旋转。rotateX(a)等价于rotate(1,0,0,,a)、rotateY(a)等价于rotate(0,1,0,a)、rotateZ(a)等价于rotate(0,0,1,a)。

四、scaleZ()和scale3d()

即3D缩放。当scale3d()中x轴和Y轴同为1，即scale3d(1,1,sz)，其效果等同于scaleZ(sz)。

（个人觉的，除了让元素只在Z轴上按比例缩放、各值取（-1）达到对称变换这些用途具有实用性之外，一般不会去同时缩放x,y吧，因为前者是基于相似图形，具有可控性，后     者要求想象能力实在是太高了>_<)

五、matrix3d()

3D矩阵在此不再赘述，学好图形学中的矩阵变换就行。

实际应用的时候，你必须关注的问题

　 相关属性有一个叫做perspective属性，翻译为中文叫做：透视，视角。通俗一点地将就是“看东西的角度，你的眼睛所在的点”。但是在css3 3D变换中，透视点是在浏览器的前方。有人是这么解析的“比方说，一个1680像素宽的显示器中有张图片，应用了3D transform，同时，该元素或该元素父辈元素设置的perspective大小为2000像素。则这张图片呈现的3D效果就跟你本人在1.2个显示器宽度的地方(1680*1.2≈2000)看到的真实效果一致！！”~注意：属性值不能为负值。

更有趣的是：perspective有两种设置方式，一种是在容器上，一种是在自身元素上。需要注意的一点是:当容器里面只有一个元素的时候，这两种设置方法所表现出来的效果是一样。那这两种设置方法的差异在哪里呢？

且看下图（还是盗用别人的）：

区别很明显，在以整个容器为视角对象的时候，你看到了不同形态的正方形，而当以每个方块为视角对象的时候，所有方块在perspective相同的情况下所表现出来的效果是一样的。打个通俗的比方是：有若干形态相同的杯子摆在橱柜里，你在橱柜外面，不断调整你眼睛所在的位置进行观察，你会看不同的场景图，这所谓的不同是你视角变化的时候前后对照的表现；而如果夸张一点，假如你有n只眼睛，一只眼睛看一个杯子，然后你同方向移动你那n只眼睛，每只眼睛看到的杯子形态还是一样的，这不是视角变化前后的对照，是同一时刻，每只眼睛看到的东西的对照。

还有一个相关属性叫做：perspective-origin。“就是你的眼睛往哪里看”。

还有一个相关属性叫做：transform-style: flat|preserve-3d，flat为默认值，表示的是平面，preserve-3d表示3D透视，实现3d效果。transform-style设置在容器上。

还有一个相关属性叫做：backface-visibility：hidden。因为在css3的3D世界中，我们可以看到背后的元素，但是这却和现实世界不相符，所以就有将backface-visibility设置为hidden的做法。

相关实践代码可以github上的获取： https://github.com/Gyingguo/css3-demo

参考资料： 《图解css3核心技术与案例实战》、张鑫旭博客 CSS3 3D transform变换