原文-理解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)进行变换，图形将进行斜拉伸。
对应的点发生如下变化。
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) |
网友评论