https://www.cnblogs.com/zxnn/p/8261849.html
transform字面上就是变形,改变的意思。
在CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
2D Transform 方法
- translate() 根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。
- rotate() 在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。
- scale() 该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数。
-
matrix() 和2D变换方法合并成一个。
matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。 -
skew()包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。
skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
下面我们一个个来介绍它们:
一、移动translate
1、translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素。
如:translate : translate(100px,20px);
2、translateX(n) 定义 2D 转换,沿着 X 轴移动元素。
如:transform:translateX(100px);</