2D conversion method:
translate()
rotate()
scale()
skew()
matrix()
1. The translate() method moves from the current element position according to the parameters given by the left (X-axis) and top (Y-axis) positions
E.g:
1 div 2 { 3 transform: translate(50px,100px); 4 -ms-transform: translate(50px,100px); /* IE 9 */ 5 -webkit-transform: translate(50px,100px); /* Safari and Chrome */ 6 }
The translate value (50px, 100px) is to move the element 50 pixels from the left and 100 pixels from the top.
2. The rotate() method, which rotates the element clockwise by a given degree. Negative values are allowed, so that the element is rotated counterclockwise.
E.g:
1 div 2 { 3 transform: rotate(30deg); 4 -ms-transform: rotate(30deg); /* IE 9 */ 5 -webkit-transform: rotate(30deg); /* Safari and Chrome */ 6 }
rotate value (30deg) The element rotates 30 degrees clockwise.
3. The scale() method, the size of the element to increase or decrease, depends on the parameters of width (X axis) and height (Y axis):
E.g:
1 -ms-transform:scale(2,3); /* IE 9 */ 2 -webkit-transform: scale(2,3); /* Safari */ 3 transform: scale(2,3); /* Standard syntax */
scale(2,3) transforms the width to 2 times its original size, and the height to 3 times its original size.
4. Skew() method
grammar:
1 transform:skew(<angle> [,<angle>]);
Contains two parameter values, representing the angle of the X-axis and Y-axis inclination respectively. If the second parameter is empty, the default is 0, and if the parameter is negative, it is inclined in the opposite direction.
- skewX(<angle>); Indicates that it is only skewed on the X axis (horizontal direction)
- skewY(<angle>); Indicates that it is only skewed on the Y axis (vertical direction)
E.g":
1 div 2 { 3 transform: skew(30deg,20deg); 4 -ms-transform: skew(30deg,20deg); /* IE 9 */ 5 -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ 6 }
skew(30deg,20deg) The element is skewed by 20 degrees and 30 degrees on the X and Y axes
5. The matrix() method and the 2D transformation method are combined into one.
The matrix method has six parameters, including rotation, scaling, translation (translation) and tilt functions.
E.g:
1 div 2 { 3 transform:matrix(0.866,0.5,-0.5,0.866,0,0); 4 -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ 5 -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ 6 }
