/*在Z轴向外移动100px（向我们眼睛的方向）*/transform:translateZ(100px);/*分别在X、Y、Z轴上移动100px、50px、100px*/transform:translate3d(100px,50px,100px);需要注意的是，在X、Y轴的移动距离可以用像素，也可以用百分比，但Z轴移动的距离通常用像素值。
我们发现上面的样式虽然用了translate3d，但依旧是二维效果的。
如果想要产生3D效果，需要透视。也就是模拟人视觉的位置去看。
透视也称为视距，视距就是人眼睛到屏幕的距离，距离越近，成像越大，距离越远，成像越小。
透视写在被观察元素的父盒子上面。
perspective:300px;
这下盒子移动后看着变大了，因为我们在Z轴方向向我们移动了100px，近大远小。
尝试将盒子移远一点，会看到盒子变小了：
/*在Z轴向内移动100px（往屏幕内方向移动）*/transform:translate3d(100px,50px,-100px);
3D旋转可以让元素在三维平面内沿着x轴、y轴、z轴或者自定义轴进行旋转。
关于元素旋转方向，可以记住左手准则：左手的大拇指指向x/y/z的正方向，其余手指弯曲的方向就是该元素旋转的方向（正值）。
/*沿着x轴正方向旋转45度*/transform:rotateX(45deg);
/*沿着y轴正方向旋转45度*/transform:rotateY(45deg);
/*沿着z轴正方向旋转45度（其实就是之前的rotate）*/transform:rotateZ(45deg);
/*沿着自定义轴旋转，x、y、z表示旋转轴的矢量，表示是否希望沿着该轴旋转*/transform:rotate3d(x,y,z,deg);/*沿着x轴旋转45度*/transform:rotate3d(1,0,0,45deg);/*沿着x、y轴的对角线旋转45度*/transform:rotate3d(1,1,0,45deg);4、3D呈现——transform-styletransform-style控制子元素是否开启三维立体环境，需要写给父级的盒子，子级盒子才能呈现3D效果。