1、向x轴移动100像素

transform: translateX(100px);

2、向y轴移动100像素

transform: translateY(100PX);

3、向左移动100像素，同时也向右移动100像素

transform: translateX(100px) translateY(100px);【注意这里中间是用空格隔开的】

4、transform: translateX(100px) translateY(100px) translateZ(100px);加上向z轴移动100像素，在页面上是看不出来的，需要借助透视效果。

注意事项：

1、translateZ沿着z轴移动；

2、translateZ后面的单位我们一般跟px；

3、translateZ(100px)向外移动100像素（向我们的眼睛来移动的）；

4、3d移动有简写的方法：transform: translate3d(x,y,z);

5、xyz是不能省略的，如果没有就写0；

nerror="javascript:errorimg.call(this);">

释义：当需要实现更复杂的3D位移效果时，可以使用translate3d()函数进行组合控制。比如要实现元素斜向空间移动，可以写成transform: translate3d(50px, -30px, 200px)，此时元素会同时沿x轴右移50像素、y轴上移30像素、z轴向屏幕外突出200像素。值得注意的是，这种立体位移效果必须配合perspective属性才能显现，就像我们观看3D电影需要佩戴特殊眼镜一样，浏览器也需要通过设置视距来建立三维空间感。

在实际开发中，我们经常需要配合transition实现平滑的位移动画。例如设置transition: transform 0.5s ease后，当hover状态触发transform: translate3d(0,0,50px)时，元素会产生缓缓浮出页面的视觉效果。这种技法常见于按钮交互设计，能让平面网页产生微妙的纵深感。