matrix() matrix transcript in transform in CSS3

【introduction】

transform:matrix(0.866,0.5,-0.5,0.866,0,0);

transform: rotate(30deg);

The above two sentences are equivalent, which is related to linear algebra

For linear algebra, see

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

 

The parameters of matrix(a,b,c,d,e,f) are split into matrices like this

a c e 
b d f
0 0 1

Rotate the z-axis θ degrees and the
x-axis will eventually be offset from the origin, and the coordinates of the point [x, 0, 0] on the X-axis will become [cosθx, sinθx, 0]

          a c e 
[1,0,0] * b d f = [cosθ,sinθ,0]
          0 0 1

y-axis

          a c e 
[0,1,0] * b d f = [-sinθ,cosθ,0]
          0 0 1

z axis is not moving

          a c e 
[0,0,1] * b d f = [0,0,1]
          0 0 1

In this way, you can reverse the values ​​of the matrix