translate3d移动

transform: translateX(100px)：向右移动100px

transform: translateY(100px)：向下移动100px

transform: translateZ(100px)：向z轴正方向移动100px

注意：3D动画需要设置透视距离（perspective(800px) ），否则会显示异常

透视写在被观察元素的父盒子上面的

复合写法 transform: trarnslate3d(x,y,z)

注意：x,y,z的单位可以是px、em、rem等

rotate3d旋转

transform: rotateX(45deg)：绕x轴旋转45度

transform: rotateY(45deg)：绕y轴旋转45度

transform: rotateZ(45deg)：绕z轴旋转45度

复合写法 transform: rotate3d(x,y,z,角度)

注意：x,y,z表示旋转轴的矢量分量，取值为0或1，0表示不旋转，1表示旋转

注意：x,y,z的单位可以是px、em、rem等

3D呈现transform-style

transform-style: preserve-3d;：保留3D空间

拓展

perspective：透视距离

思考：为什么盒子位置不同，移动效果也不同？

原因：perspective 的消失点（Vanishing Point）默认在父元素中心

当元素不在中心时，translateZ 会让元素以消失点为中心向外扩张，产生偏移效果