How to transform 2D in css3
This article mainly explains "how to transform 2D in css3". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to transform 2D in css3.
2D conversion
Translate () indicates moving from its current position to the set value, setting the left value and the top value
Translate (100pxMagol 30px) / / move 100px from the left and 30px from top to bottom
Rotate () represents the angle at which the element rotates clockwise, and when it is negative, it rotates counterclockwise.
Rotate (30deg) / / rotate 30 degrees clockwise
Scale () indicates that the size of the element increases or decreases the set width (X axis) and height (Y axis)
Scale (3) 4) / / double the width and quadruple the height
Skew () represents the angle set by the element flip, setting the X and Y axes
Skew (30 deg) / / flip the element 30 degrees along the X axis and 20 degrees along the Y axis
Matrix ()
The matrix () method is a general 2D method that contains mathematical functions, rotate, scale, move, and tilt.
Matrix (0.866, 0.50, 0.85, 0.85, 0.866, 0, 0)
Example:
/ * run under chrome browser * /
Div
{
Width:200px
Height:100px
Text-align:center
Line-height:100px
Background-color:pink
-webkit-transform:translateX (150px); / * X axis moves 150px*/
-webkit-transform:rotate (- 50deg); / * rotate 50 degrees counterclockwise * /
-webkit-transform:skew (20degrecom 20deg); / * rotate 20 degrees along the X axis, Y axis * /
}
Effect picture
At this point, I believe you have a deeper understanding of "how to transform 2D in css3". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
