css3:2d Conversion method

With transform, you can rotate, scale, tilt, move

Attributes are: translate, scale

Move:

TranslateX (10px); Move in horizontal direction 10px

Translatey (50px); Move vertically 50px

Translate (10px); Move in horizontal direction 10px

Translate (10px,50px); Move the 10px horizontally, move the 50px in the vertical direction

Scaling:

ScaleX (2); Twice times the width of the original

ScaleY (2); Twice times as high as the original.

Scale (2); Increase to twice times the original

Scale (n); The width is unchanged, the height increases is twice times the original

Rotating:

Rotate (30deg); Rotate 30 degrees

Tilt:

Skewx (30DEG); Tilt 30 degrees along the x axis

Skewy (30DEG); Tilt 30 degrees along the Y axis

Skew (10DEG,20DEG); Tilt 10 degrees along the x axis, tilt 20 degrees along the Y axis

Of course, to be compatible, you should write the full prefix:

transform:rotate (7deg);-ms-transform:rotate (7deg);      /*  */-moz-transform:rotate (7deg)     ; /*  *     /* */-o-transform:rotate (7deg);  /* */

Matrix: Relatively complex, involving the operation of matrices, the corresponding matrix is

(Omit 1w+ Word: ）

You just need to attach a value to the abcdef.

Translate (Tx,ty) can be converted from matrix (1,0,0,1,tx,ty)

Scale (Sx,sy) can be converted from matrix (sx,0,0,sy,0,0)

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

Skew (Θx,θy) can be converted from matrix (1,tan (Θy), tan (θx), 1,0,0)

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

Demo: http://peterned.home.xs4all.nl/matrices/

css3:2d Conversion method