变形 transform（3D）

3D坐标系

3D 坐标系比2D坐标系多了一个Z轴。

• X 轴 越往右越大
• Y 轴 越往下越大
• Z 轴 越往屏幕越大

3D位移

transform: translate3d(x, y, z);
也可以分开使用，更方便阅读：

transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);

透视

透视：空间转换时，为元素添加近大远小、近实远虚的视觉效果
perspective: 800px;取值范围通常在800px-1200px。
透视添加在父盒子上。

透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

• 其中 d 为透视的距离
• z 是 translateZ 的距离， 这个距离靠近我们，盒子越大。

3D旋转

3d旋转在透视的加持下才会更加真实。

rotateX

围绕着x轴旋转

body {
     perspective: 400px;
}

img {
    transition: all 1s;
}

img:hover {
    transform: rotateX(180deg);
}

rotateY

围绕着Y轴旋转

body {
    perspective: 400px;
}

img {
    transition: all 1s;
}

img:hover {
    transform: rotateY(180deg);
}

旋转规律

• 大拇指指向X轴正值方向（右）， 则四指指向的方向是旋转的方向
• 大拇指指向Y轴正值方向（下）， 则四指指向的方向是旋转的方向

立体呈现

transform-style: preserve-3d;
盒子将会以3d形式呈现
（非原创，仅作为学习笔记）