CSS – Transform 3D移动

translate3d()

三维变换使用基于二维变换的相同属性，可以让我们基于三个坐标方向对元素进行变换。和二维变形一样，三维变形可以使用 transform 属性来设置。

方法

translate3d(x方向的偏移, y方向的偏移, z方向的偏移) 使元素在这三个纬度中移动，也可以分开写，如：

transform: translateX(length)
transform: translateY(length)
transform: translateZ(length)
transform: translate3d(x,y,z)

scale3d

scale3d(x,y,z) 使元素在这三个纬度中缩方，也可以分开写，如

transform: scaleX(length)
transform: scaleY(length)
transform: scaleZ(length)
transform: scale3d(x,y,z)

如果值 > 1.01 则是放大， < 0.99 则是缩小

rotate3d

rotate3d(x,y,z,angle) 指定需要进行旋转的坐标轴

rotateX(angle) 是元素依照 X 轴旋转

rotateY(angle) 是元素依照 Y 轴旋转

rotateZ(angle) 是元素依照 Z 轴旋转

三维旋转相对比较特殊，它的 x y z轴作为一个向量与另一个轴形成对角线，所旋转的为以对角线为线中心进行旋转。

当 rotate3d(1,1,0) 时，则是 x和y 轴作为一个向量，并形成一条对角线，利用这条对角线进行旋转。

三维透视距离

perspective() 为一个元素设置三维透视的距离，仅作用于元素后代，而不是其元素本身。当perspective: none/0 时，相当于没有设置。比如要建一个小立方体，长宽高都是200px,如果 perspective < 200px 那就相当于站在盒子里面看的结果，如果 perspective非常大那就是站在非常远的地方看，prespective 属性指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。

perspective-origin 属性规定了镜头在平面上的位置。默认是放在元素的中心。

保存转换值

transform-style 能使被转换的子元素保留其3D转换（需要设置在父元素中）