CSS：3D效果（位移、旋转）

浏览器平面为二维平面，以浏览器可视区域左上角为原点，X轴为左上到右上，正方向为右；Y轴为左上到左下，正方向为下。

要想实现3D效果，我们需要引入Z轴，这条Z轴垂直于屏幕，以出平面为正方向。

transform产生的位移和旋转都不脱标！！！

1、3D位移

3D位移函数与2D位移一样，需要使用transfrom变量，变量值有如下几个：

1、transform:translateX(位移量)
2、transform:translateY(位移量)
3、transform:translateZ(位移量)
4、transform:translate3d(X位移量，Y位移量，Z位移量)

当我们对盒子设置transform:translateZ(位移量)时，我们发现浏览器中盒子并未产生变换，这是由于未对父元素设置视距perspective，导致我们无法直观感受到Z轴导致的。

当我们对盒子的父元素添加perspective：800px后便可直观感受到Z轴移动了；perspective视距函数是指用户的眼睛到浏览器平面的距离，根据经验，这个数值一般取800px到1200px之间。

2、3D旋转

3D旋转的变量值有如下几个：

1、transform:rotateX(旋转量)
2、transform:rotateY(旋转量)
3、transform:rotateZ(旋转量)
4、transform:rotate3d(X旋转量，Y旋转量，Z旋转量)

旋转正方向为X>Y；Y>Z；Z>X