css3—matrix矩阵

原文链接:走走停停看看

demo:http://peterned.home.xs4all.nl/matrices/#1.282,-0.010,-0.273,0.801,51.793,-103.582

http://blog.csdn.net/baoeni/article/details/7605394

今天终于知道matrix矩阵的工作原理,原来跟自己大一时学习的线性代数有很大的关系,看来得找个时间回去补一下功课了….
css3—matrix矩阵

这就是矩阵的运算了,简化为公式:
x’=ax+cy+e
y’=bx+dy+f

所以给定一个matrix矩阵,通过上面的公式变换就可以得到不同的效果,这关系到计算机图形学(省略1w+字..)

css3的transform属性很好用,其实可以变换为matrix矩阵工作,只需要给abcdef附上相应的值就可以了。
比如translate(tx,ty)可以由matrix(1,0,0,1,tx,ty)转换而来,计算方法见公式
scale(sx,sy)可以由matrix(sx,0,0,sy,0,0)转变
rotate(θ)可以有matrix(cosθ,sinθ,-sinθ,cosθ,0,0)转变而来
skew(θx,θy)可以由matrix(1,tan(θy),tan(θx),1,0,0)转变过来

相关推荐