Summary of the new feature of CSS3 (Transform)

Summary of the new feature of CSS3 (Transform)
Overview: the newly added Transform in CSS3 can change the coordinates of elements in the visible area (this change will not cause document rearrangement, only arrangement), shape, and some 3D deformation. combined with Animation (there will be a link later), it can achieve cool Animation; rotation: rotate supports a parameter with an angle value of 0-360deg # demo {transform: rotate (180deg ); /* To achieve rotation, the upper left corner will display */} scale in the lower right corner: scale supports two parameters (x, y). If y is not specified, the value of x is taken; 1 is normal, <1 is scaled,> 1 is amplified; # demo {transform: scale (1.2);/* 1.2 x/transform: scale (. 8);/* scale down to a normal 0.8 times */} scale provides two sub-Methods: scaleX and scaleY, which are used to set the zooming of x or y respectively; skew ): skew supports two parameters (x, y). The parameter type is angle (deg). If y is not specified, the default value is 0 (different from scaling). # demo {transform: skew (45deg);/* The text is tilted 45 ° to the left along the X axis */transform: skew (0, 45deg ); /* The text is tilted 45 ° down along the y axis */} if only x or y is set, you can directly use two submethods, skewX and skewY; translation (translate ): translate receives two parameters (x, y) as the translation distance. If the y value is not specified, the default value is 0, supports valid length units in all CSS (use translate to move elements without triggering shuffling, only re-painting); # demo {transform: translate (20px, 5vl ); /* Move 20 pixels to the left, and move the window height of 5% down */}. There are two sub-methods, translateX and translateY. A simple example is provided, and rotate is used; conclusion: Transform can be used to do a lot of cool things (skipping matrix, matrix3d didn't say ...) of course, don't die like me.