3D转换——网页三维坐标系，可实现3D位移、3D旋转等效果。

一、3D转换之位移translate3d

transform:translate3d(x,y,z)   x,y,z是不能省略的，如果没有就写0

transform:translateZ  z越大，物体越大

*透视perspective

透视我们也称之为视距，就是人的眼睛到屏幕的距离。距离越小，图像越大。

透视必须写在被观察元素的父盒子上。

二、3D转换之旋转rotate3d

2D旋转只能围绕某个中心点，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)  沿着自定义轴旋转，deg为角度。例如transform:rotate3d(1,1,0,deg)   0、1代表是否选择

transform-style

（1）控制子元素是否开启三维立体环境。

（2）transform-style:flat 默认不开启     preserve-3d 开启立体空间

（3）代码写给父级盒子，但是影响的是子盒子。