CSS动画2D

2D 转换

首先要了解2D-transform的坐标系统

设置旋转中心点
transform-origin：bottom center

Paste_Image.png

• translate()--平移

根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
transform: translate(50px,100px);

• rotate()--旋转

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
transform: rotate(30deg);

• scale()--缩放

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数;
transform: scale(2,3);

• skew()--倾斜

语法
transform:skew(<angle> ,<angle>);
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

• skewX(<angle>);表示只在X轴(水平方向)倾斜。
• skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

• matrix()

matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

重头戏来了

transform: matrix(a,b,c,d,e,f);

实际上，这6参数，对应的矩阵就是：

Paste_Image.png

转换公式：

Paste_Image.png

matrix的偏移
transform: matrix(1, 0, 0, 1, 30, 30); /* a=1, b=0, c=0, d=1, e=30, f=30 */

假设矩阵中心点为(x,y)=(0,0)，变换后：

x坐标就是ax+cy+e = 10+00+30 =30
y坐标就是bx+dy+f = 00+10+30 =30

也就是说偏移只与后面两个参数有关
注意：这里面e，f参数的单位可以省略

matrix中的缩放
transform: matrix(s, 0, 0, s, 0, 0);

x' = ax+cy+e = sx+0y+0 = sx;
y' = bx+dy+f = 0x+sy+0 = sy;

matrix中的旋转
transform： matrix(cosθ,sinθ,-sinθ,cosθ,0,0)

x' = xcosθ-ysinθ+0 = xcosθ-ysinθ
y' = xsinθ+ycosθ+0 = xsinθ+ycosθ

matrix中的拉伸

matrix(1,tan(θy),tan(θx),1,0,0)

x' = x+ytan(θx)+0 = x+ytan(θx)
y' = xtan(θy)+y+0 = xtan(θy)+y

了解更多