CSS3-转换之translate

在讲解之前，我们先将我们要变换的元素看做一个正方体，为了方便理解，我标注了XYZ轴以及方向，如下图：

translate有四种情况，如下：

1、translateX(x)

定义X轴转换，即仅在水平方向移动，正值向右移动，负值向左移动，原理如下图：

元素向右移动了30px，俯视图如上图。

2、translateY(y)

定义Y轴转换，即仅在垂直方向移动，也就是上面正方体的前后移动，正值垂直方向向下，负值垂直方向向上，原理如下图：

元素向下移动了30px，原理如上图。

3、translate(x,y)

定义2D转换，即水平方向和垂直方向同时移动，原理如下图：

上图为正方体俯视图，元素分别向右、向前移动了30px。

4、translateZ(z)

定义Z轴转换，即仅在Z轴方向移动，原理如下图：

从上图看，并没有任何变化，但实际元素向上移动30px，因为是俯视，z轴移动的变化看不出来，所以看上去向无变化。

5、translate3d(x,y,z)

定义3D转换，原理如下图：

元素分别向右、向前、向上移动30px,同样俯视Z轴变化只是上下变化，俯视图看上去无变化。

上面正方体主要是用来理解3D变换的，如有不恰当的地方，还望导游指教。