matrix使用方法:
transform: matrix(a,b,c,d,e,f);
根据
得到:
x’=ax+cy+e
y’=bx+dy+f
其中,x和y是元素最开始的坐标,x’ 和y’则是通过矩阵变换后得到新的坐标。
需要说明的几点:
1、translate和scale都很好理解,利用公式很容易得到。
2、旋转rotate:比matrix方便多了。
方法以及参数使用如下(假设角度为θ
):
matrix(cosθ,sinθ,-sinθ,cosθ,0,0)
结合矩阵公式,就有:
x' = x*cosθ-y*sinθ+0 = x*cosθ-y*sinθ
y' = x*sinθ+y*cosθ+0 = x*sinθ+y*cosθ
拉伸也用到了三角函数,不过是tanθ
,而且,其至于b, c
两个参数相关,书写如下(注意y
轴倾斜角度在前):
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
对应于skew(θx + "deg",θy+ "deg")
这种写法。