2.5 3D转换

3D转换的坐标轴

2.5.1 3D移动（位移） translate3d

注意：这四个属性和2D一样，只会生效其中一个，因为他们本体都是transform属性，后写的会覆盖前面的。所以如果要在两个方向以上的坐标移动，请用translate3d(x,y,z)

注意：z轴方向的移动，如果不借助透视 perspective 是无法生效的。

2.5.2 透视距离 perspective

使用方法：给需要透视的元素的父盒子加上 perspective属性，单位为像素px。透视距离越小，呈像越大，反之越小。perspective就是用来设置视距d的距离的。只有设置了视距后，z轴才会生效。且之后的所有元素都有透视效果，包括子孙元素

    <div></div>
    <style>
        body {
            /* 1.必须给父盒子添加透视距离perspective属性，z轴移动才会生效 */
            perspective: 500px;
        }
        div {
            background-color: pink;
            width: 200px;
            height: 200px;
            transform: translateZ(200px, 0, 100px);
        }
    </style>

2.5.3 3D旋转 rotate3d

细节点：如果没有透视属性的话，3d旋转时不会产生近大远小的效果的，还是平面的旋转。所以最好搭配透视perspective一起使用，由此可见透视属性的重要性。

旋转的方向

当rotate的角度为正数时，将轴的箭头对准人脸，会按照轴进行顺时针旋转，反之角度为负的则是逆时针旋转。

2.5.4 rotate3d(x,y,z,deg)

在空间想象时，可以想象为在各自的轴上旋转，比如先沿着x轴转，再沿着y轴转，再沿着z轴转，就很容易想象出来了。

2.5.5 3D呈现 transform-style （非常重要）

在父级开启3D空间之后，其所有子孙后代都会有透视效果。如果元素呈现层叠样式，则翻转盒子时可以看到背面的元素。

取值：

flat：
指定子元素位于此元素所在平面内
preserve-3d：
指定子元素定位在三维空间内

总结

所有的3D变换基本都需要的两个重要的属性，透视距离perspective 和 呈现效果transform-style: perserve-3d