3D旋转+位移+透视

3D旋转

transform: rotate3D(x,y,z,deg);
x,y,z 是一个0/1的数值，0表示不旋转，1表示旋转，deg表示旋转的角度

 .box {
            transform: rotate3D(1,1,1,180deg);
        }

• rorateX，X轴旋转
• rorateY，Y轴旋转
• rorateZ， Z轴旋转

 .box:hover {
       transform: rotateX(180deg);
       transform: rotateY(180deg);
       transform: rotateZ(180deg);
    }

旋转的方向：左手法则

**左手法则:**左手握住旋转轴，大拇指指向旋转的正方向，其他手指的卷曲方向就是旋转的正方向。

3D位移

transform: translate3d(x,y,z);

    .box:hover{
       transform: translate3d(100px,100px,0px);
    }

• transform: translateX(); //沿着x轴移动
• transform: translateY();//沿着Y轴移动
• transform: translateZ();//沿着Z轴移动

     .box {
        transform: translateX(100px);
        transform: translateY(100px);
        transform: translateZ(100px);
    }

透视

透视：

• 设置给变换盒子的父容器。
• 设置用户眼睛与屏幕的距离。
• 透视效果只是视觉上的呈现，不是真正的距离。

        body {
            perspective: 200px;
        }

perspective 透视：

• translateZ为正值，perspective值越小，盒子与你的距离越近，看到的效果也就越大。
• translateZ为0，perspective不管怎么变化，盒子上的阴影不变，看到的效果不变。
• translateZ为负值，perspective值越小，盒子与你的距离越近，看到的效果也就越小。