css 2D变形

如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。

 

缩放动画scale  

scale()函数 让元素根据中心原点对对象进行缩放;

 1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放） 如：

transform: scale(1.5,0.5); 如果第二个参数没有设置，则第二个参数等于第一个参数

2、scaleX(x)元素仅水平方向缩放（X轴缩放） 如：

注：参数值为正数值放大元素；负数值先翻转元素，再缩放元素；0.01~0.99之间缩小元素

 

 

1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）

2、translateX(x)仅水平方向移动（X轴移动）

3、translateY(Y)仅垂直方向移动（Y轴移动）

实例演示：通过translate()函数将元素向Y轴下方移动50px,X轴右方移动100px。

transform: translate(100px,50px);

 

 

1、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；

2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；

3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）

 

matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，我在这里只是简单的说一下CSS3中的transform有这么一个属性值，如果需要深入了解，需要对数学矩阵有一定的知识。