CSS3的变换属性主要用于元素的旋转、缩放、倾斜和位移操作。
1、 translate属性用于设定元素的移动距离，基本语法为指定水平和垂直方向的偏移量。
2、 通过设置x和y轴偏移量，实现元素在平面内的位置移动。
3、 例子：
4、 为展示元素位移的对比效果，设置父容器box，并添加同级红色参照元素div2，用于直观体现偏移前后的位置变化。
5、 CSS样式部分
6、 }
7、 }
8、 }
9、 HTML代码部分
10、 二维变换，元素在水平方向移动100像素，垂直方向移动20像素。
11、 效果见图示
12、 通过调整X轴数值，利用translateX(x)实现元素在水平方向的位移，x表示移动的距离。
13、 例子：
14、 CSS样式部分
15、 }
16、 }
17、 }
18、 HTML代码部分
19、 二维变换，沿X轴平移200像素，实现元素位置的水平移动效果。
20、 效果见下图
21、 通过调整Y轴数值，利用translateY(y)实现元素在垂直方向的位移，y值决定移动距离。
22、 例子：
23、 CSS样式代码
24、 }
25、 }
26、 }
27、 HTML代码部分
28、 二维变换，沿y轴方向平移200像素。
29、 效果见图示
30、 通过调整Z轴数值，利用translateZ(z)实现元素在Z轴方向的位移变换。
31、 例子：
32、 CSS样式代码
33、 }
34、 }
35、 }
36、 HTML代码部分
37、 二维变换，沿Z轴方向平移200像素。
38、 效果见下图
39、 利用translate3d(x,y,z)函数，通过调整x、y、z参数实现元素在三维空间中的位置移动。
40、 例子：
41、 CSS样式部分
42、 }
43、 }
44、 }
45、 HTML代码部分
46、 3D变换效果，分别在X轴、Y轴和Z轴方向上平移100像素、200像素和50像素。
47、 效果见下图
