在讲解之前,我们先将我们要变换的元素看做一个正方体,为了方便理解,我标注了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变换的,如有不恰当的地方,还望导游指教。