2、移动：translateX、translateY、translateZ
格式：
transform: translateX(100px); //沿着 X 轴移动 transform: translateY(360px); //沿着 Y 轴移动 transform: translateZ(360px); //沿着 Z 轴移动
格式举例：
（1）translateX 举例：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { width: 200px; height: 200px; background: green; transition: all 1s; } .box:hover { transform: translateX(100px); } </style> </head> <body> <div class="box"> </div> </body> </html>
效果：
（2）translateY 举例：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { width: 200px; height: 200px; background: green; transition: all 1s; } .box:hover { transform: translateY(100px); } </style> </head> <body> <div class="box"> </div> </body> </html>
效果：
（3）translateZ 举例：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { /* 给box的父元素加透视效果*/ perspective: 1000px; } .box { width: 250px; height: 250px; background: green; transition: all 1s; margin: 200px auto } .box:hover { /* translateZ必须配合透视来使用*/ transform: translateZ(400px); } </style> </head> <body> <div class="box"> </div> </body> </html>
效果：
上方代码中，如果不加透视属性，是看不到translateZ的效果的。
3、透视：perspective
电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。但仅仅只是视觉呈现出3d 效果，并不是正真的3d。
格式有两种写法：
- 作为一个属性，设置给父元素，作用于所有3D转换的子元素
- 作为 transform 属性的一个值，做用于元素自身。
4、3D呈现（transform-style）
3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。属性值可以如下：
transform-style: preserve-3d; //让 子盒子 位于三维空间里 transform-style: flat; //让子盒子位于此元素所在的平面内（子盒子被扁平化）
案例：立方体
