对于位移translate()方法,我们分为3种情况:
-
ranslateX(x):元素仅在水平方向移动(X轴移动);
-
translateY(y):元素仅在垂直方向移动(Y轴移动);
-
transklate(x,y):元素在水平方向和垂直方向同时移动(X轴和Y轴同时移动)
其中:
-
x表示元素在水平方向(X轴)的移动距离,当x为正时,表示元素在水平方向向右移动(X轴正方向);当x为负时,表示元素在水平方向向左移动(X轴负方向)。
-
y表示元素在水平方向(y轴)的移动距离,当y为正时,表示元素在垂直方向向下移动;当y为负时,表示元素在垂直方向向上移动。
在W3C规定中,出于人的习惯是从上到下阅读,所选取的坐标系中x轴正方向向右,而y轴正方向向下。
-
在CSS3中,所有变形方法都是属于transform属性,因此所有关于变形的方法前面都要加上“tranform:”,以表示“变形”处理。这一点大家一定要记住。
-
单位为px、em或百分比等,x,y为百分数时,是相当于移动的元素的宽+padding,高+padding的百分比。
=====================================================================
代码: