原文-理解CSS3 transform中的Matrix(矩陣) by張鑫旭
matrix矩陣
transform中將用到這個變化矩陣，代碼寫做：matrix(a,b,c,d,e,f)。
矩陣變換，可以帶來更直接，可讀性更高的變換方式。
平移
e代表x平移量；
f代表y平移量；
縮放
a為x軸的縮放
d為y軸的縮放
旋轉
matrix(cosθ,sinθ,-sinθ,cosθ,0,0)當matrix按照θ計算并取值，經過矩陣變換，圖形就順時針轉過θ角度。
斜拉伸(skew)
根據matrix(1,tan(θy),tan(θx),1,0,0)進行變換，圖形將進行斜拉伸。
對應的點發(fā)生如下變化。
x' = x+y*tan(θx)+0 = x+y*tan(θx)
y' = x*tan(θy)+y+0 = x*tan(θy)+y
其他
其他復雜的圖形變化，可以通過計算出變換前后坐標軸的關系，來得到matrix矩陣。
常用變換對應表格
| transform2d | matrix |
|---|---|
| translate(tx, ty) | matrix(1, 0, 0, 1, tx, ty); |
| scale(sx, sy) | matrix(sx, 0, 0, sy, 0, 0); |
| rotate(a) | matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0); |
| skew(ax, ay) | matrix(1, tan(ay), tan(ax), 1, 0, 0); |
| transform3d | matrix |
|---|---|
| translate3d | matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,tx,ty,tz,1) |
| scale3d(sx,sy,sz) | matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1) |
