2D 轉(zhuǎn)換
首先要了解2D-transform的坐標(biāo)系統(tǒng)
設(shè)置旋轉(zhuǎn)中心點(diǎn)
transform-origin：bottom center
- translate()--平移
根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)，從當(dāng)前元素位置移動。
translate()方法剔应，根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)口芍，從當(dāng)前元素位置移動今魔。
transform: translate(50px,100px);
- rotate()--旋轉(zhuǎn)
rotate()方法锭弊，在一個(gè)給定度數(shù)順時(shí)針旋轉(zhuǎn)的元素交播。負(fù)值是允許的，這樣是元素逆時(shí)針旋轉(zhuǎn)蝇裤。
transform: rotate(30deg);
- scale()--縮放
scale()方法廷支，該元素增加或減少的大小，取決于寬度（X軸）和高度（Y軸）的參數(shù);
transform: scale(2,3);
- skew()--傾斜
語法
transform:skew(<angle> ,<angle>);
包含兩個(gè)參數(shù)值栓辜，分別表示X軸和Y軸傾斜的角度恋拍，如果第二個(gè)參數(shù)為空，則默認(rèn)為0藕甩，參數(shù)為負(fù)表示向相反方向傾斜施敢。
- skewX(<angle>);表示只在X軸(水平方向)傾斜。
- skewY(<angle>);表示只在Y軸(垂直方向)傾斜狭莱。
- matrix()
matrix()方法和2D變換方法合并成一個(gè)僵娃。
matrix 方法有六個(gè)參數(shù)，包含旋轉(zhuǎn)腋妙，縮放默怨，移動（平移）和傾斜功能。
重頭戲來了
transform: matrix(a,b,c,d,e,f);
實(shí)際上骤素，這6參數(shù)匙睹，對應(yīng)的矩陣就是：
轉(zhuǎn)換公式：
matrix的偏移
transform: matrix(1, 0, 0, 1, 30, 30); /* a=1, b=0, c=0, d=1, e=30, f=30 */
假設(shè)矩陣中心點(diǎn)為(x,y)=(0,0)，變換后：
x坐標(biāo)就是ax+cy+e = 10+00+30 =30
y坐標(biāo)就是bx+dy+f = 00+10+30 =30
也就是說偏移只與后面兩個(gè)參數(shù)有關(guān)
注意：這里面e济竹，f參數(shù)的單位可以省略
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中的旋轉(zhuǎn)
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
