CSS3的3D转换
CSS3中的特效除了有前面介绍的2D转换，还有3D转换。所谓3D转换，就是模拟我们生活的环境，通过代码在屏幕上把物体显示出3D效果，让人看起来具有立体效果。
1. 三维坐标系
那在介绍正式内容之前，我们一样先来了解下三维坐标系，所谓三维坐标系，就是在原有的二维坐标系上加上了一个z轴，这样就形成了一个立体空间，如下图所示：
①x轴：水平向右 注意： x 右边是正值，左边是负值
②y轴：垂直向下 注意： y 下面是正值，上面是负值
③z轴：垂直屏幕 注意： 往外面是正值，往里面是负值
2. 3D转换
3D转换我们主要学习工作中最常用的 3D 位移 和 3D 旋转，所以今天就主要介绍这两种特效。
2.1 3D位移 translate3d
3D位移就是在2D位移的基础上，多加了一个可以移动的方向——z轴方向。因为z轴是垂直屏幕，由里指向外面，所以默认是看不到元素在z轴的方向上移动。
语法：
transform:translate3d(x,y,z); /* 其中 x、y、z 分别指要移动的轴的方向的距离 */ 也可以只移动一个方向，如下： translform:translateX(100px); /* 仅仅是在x轴上移动 */ translform:translateY(100px); /* 仅仅是在Y轴上移动 */ translform:translateZ(100px); /*仅仅是在Z轴上移动（注意：translateZ一般用px单位） */
2.2 透视 perspective
如果我们给z轴一个移动距离，可以发现根本没有任何效果，这个是因为想要在网页上产生3D效果需要透视。
所谓透视，也可以称为视距：视距就是人的眼睛到屏幕的距离。我们都知道眼睛距离物体越近，物体越大，反之，离得越远，物体越小，这就是常说的近大远小视觉立体。
上图中， d：表示视距，就是人的眼睛到屏幕的距离，d越小，意味着我们的眼睛距离物体越近，所以我们看到的物体就越大。
z：就是 z轴，物体距离屏幕的距离，z轴越大（正值） ，那么意味着物体越往外，则距离我们的眼睛越近，所以我们看到的物体就越大。
语法：
body { perspective: 400px; /* 透视 要写在被观察元素的父盒子上面的 */ }
注意点：透视写在被观察元素的父盒子上面的。
2.3 Z轴位移translateZ
translform:translateZ(100px); /* 仅仅是在Z轴上移动 */有了透视后，就能看到上述代码translateZ 引起的变化了。
变化规则：
① translateZ：往外是正值，并且值越大，物体越大
② translateZ：往里是负值，并且值越小，物体越小
综上，z轴位移，数值越大，物体越大；反之，数值越小，物体越小。
2.4 3D旋转 rotate3d
3D旋转指可以让元素在三维平面内沿着 x轴，y轴，z轴或者自定义轴进行旋转。
语法：
transform:rotateX(45deg); /* 沿着x轴 旋转 45度 */ transform:rotateY(45deg); /* 沿着y轴 旋转 45度 */ transform:rotateZ(45deg); /* 沿着Z轴 旋转 45度 */ transform:rotate3d(x,y,z,deg); /* 沿着自定义轴旋转 前三个参数要么写1，要么写0 ，1表示绕着对应轴旋转，0则表示不旋转， deg为角度 */ 比如： transform:rotate3d(1,0,0,30deg); /*表示绕着x轴旋转 30度； */
绕着x轴旋转，可以想象为单杆运动员在单杆上进行上下旋转 ，如下图所示：
绕着y轴旋转，可以想象为钢管舞舞者在绕着钢管左右旋转 ，如下图所示：
绕着z轴旋转，可以想象为转盘顺时针或逆时针旋转 ，如下图所示：
对于元素3d旋转中绕x轴和y轴方向的判断，使用的是左手准则。
左手准则
①左手的手拇指指向 x轴的正方向
②其余手指的弯曲方向就是该元素沿着x轴旋转的方向（旋转值为正值）
左手准则
①左手的手拇指指向 y轴的正方向
②其余手指的弯曲方向就是该元素沿着y轴旋转的方向（旋转值为正值）
旋转值负值时，旋转反向相反。
2.5 3D呈现 transfrom-style
transfrom-style属性是控制子元素是否开启三维立体环境， 这个属性很重要，后面必用。
①transform-style: flat 子元素不开启3d立体空间 默认的
② transform-style: preserve-3d; 子元素开启立体空间
③注意：代码写给父级，但是影响的是子盒子
2.6 代码感知
在未开启三维立体环境之前，得到的效果是左上图。
开启三维立体环境后，也就是增加了代码： transform-style: preserve-3d; 后，得到的效果是右上图，明显更具有立体感。因此在进行3D转换时，要记得给父元素增加上 transform-style: preserve-3d; 开启三维立体环境。
