translate 就是平移变换函数，这个函数最常见的用法就是 translate(a,b)，即传入两个参数，第一个参数是沿着 x 轴移动多少，第二个参数是沿着 y 轴移动多少，除此之外，translate 也是支持 3 D 的，使用 translate3d() 即可，translate3d 是 translateX, translateY, translateZ 三个属性的总和。


translate 内部可以传入绝对的像素值，也可以传入百分比，当传入百分比的时候，是基于自身的，即 translateX(50%) 相当于沿着 x 轴向右移动了自身宽度的 50%，如果是 translateY，则是基于自身高度

translate 比较常见的应用是实现水平垂直居中

.test{
position:absolute;
left:50%;
right:50%;
transform:translate(-50%,-50%);
}

同样，translate 移动的其实也是坐标轴。

translate() 可以看做 translateX() 和 translateY() 的简写属性，接下来是 translateZ() ，这个也很简单，就是在 Z 轴进行平移，还是要注意，平移的是坐标轴本身，而不是元素。


这里我先将坐标轴沿着 y 轴旋转 90 度，此时 z 轴是朝向右的，此时再进行 translateZ，就可以很明显看到元素的变换。

translate3d 是 translateX,translateY,translateZ 三个值的简写属性。

这里注意 translate 和 scale 的问题，scale 会影响坐标系，或者说拉伸坐标系，例如 scaleX(2)，相当于 x 轴拉伸为原来的两倍，或者说原来一个单位是一像素，现在变成了两像素，此时如果 translateX(100px)，虽然是平移 100 像素，但实际显示应该是 200 像素。