Css3-matrix Matrix

Today I finally know the matrix of the working principle, originally with their own large-time learning of linear algebra has a great relationship, it seems to be necessary to go back to repair homework ....

This is the operation of the Matrix, which is simplified to the formula:

Matrix (A,B,C,D,E,F);

X ' =ax+cy+e

Y ' =bx+dy+f

So given a matrix, the above formula can be changed to get different effects, which is related to computer graphics (omitted 1w+ word). ）

CSS3 's transform attribute is very useful, in fact, can be transformed into matrix work, only need to attach the corresponding value to the abcdef can be.

For example, translate (Tx,ty) can be converted from matrix (1,0,0,1,tx,ty), the calculation method see formula

Scale (Sx,sy) can be transformed by matrix (sx,0,0,sy,0,0)

Rotate (θ) can be transformed from matrix (cosθ,sinθ,-sinθ,cosθ,0,0)

Skew (θx,θy) can be transformed by matrix (1,tan (Θy), tan (θx), 1,0,0).

[Go]: http://www.cnblogs.com/GeekHacker/archive/2012/07/13/2589876.html

Other Related blogs:

Understanding matrix (matrices) in CSS3 transform:

http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/comment-page-2/

Internet Explorer matrix filters matrix rotation and scaling with transform expansion:

http://www.zhangxinxu.com/wordpress/2011/03/ie%E7%9F%A9%E9%98%B5%E6%BB%A4%E9%95%9Cmatrix%E4%B8%8B%E6%97%8B%E8% bd%ac%e4%b8%8e%e7%bc%a9%e6%94%be%e5%8f%8a%e7%bb%93%e5%90%88transform%e7%9a%84%e6%8b%93%e5%b1%95/

IE filter and CSS3 effect (detailed arrangement sharing):

Http://www.jb51.net/css/71829.html

Css3-matrix Matrix