css3 2D transform

---

Premise: The two-dimensional coordinate system is shown in the figure below

1. 2D displacement

2D displacement can change the position of the element, the specific usage is as follows:

1. First add the transformation attribute transform to the element
2. Write the specific value of transform, the relevant optional values ​​are as follows:
   • translateX: To set the displacement in the horizontal direction, the length value needs to be specified; if the specified value is a percentage, it refers to the percentage of its own width.
   • translateY: To set the displacement in the vertical direction, you need to specify the length value; if you specify a percentage, it refers to the percentage of its own height.
   • translate: One value represents the horizontal direction, two values ​​represent: horizontal and vertical direction.

important point:

1. Displacement is very similar to relative positioning in that it does not break away from the document flow and does not affect other elements.
2. The difference with relative positioning: the percentage value of relative positioning refers to its parent element; the percentage value of positioning refers to itself.
3. Browsers are optimized for displacement. Compared with positioning, browsers handle displacement more efficiently.
4. transform can be chained, for example:
   transform: translateX(30px) translateY(40px);
5. Offset has no effect on inline elements.
6. Displacement and positioning can realize horizontal and vertical centering of elements
   . box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
   
   
   
   
   

2. 2D scaling

2D scaling refers to: making elements zoom in or out, the specific usage is as follows:

1. First add the transformation attribute transform to the element
2. Write the specific value of transform, the relevant optional values ​​are as follows:
   • scaleX: Set the zoom ratio in the horizontal direction, the value is a number, 1 means no zoom, greater than 1 zooms in, and less than 1 zooms out.
   • scaleY: Set the zoom ratio in the vertical direction, the value is a number, 1 means no zoom, greater than 1 zooms in, and less than 1 zooms out.
   • scale: Set horizontal and vertical scaling at the same time, one value means setting horizontal and vertical scaling at the same time; two values ​​represent: horizontal scaling and vertical scaling respectively.

important point:

1. The value of scale supports writing negative numbers, but it is rarely used because it is easy to misunderstand.
2. With scaling, text smaller than 12px can be achieved.

3. 2D rotation

2D rotation refers to: let the element rotate clockwise or counterclockwise in a two-dimensional plane. The specific usage is as follows:

1. First add the transformation attribute transform to the element
2. Write the specific value of transform, the relevant optional values ​​are as follows:
   • rotate: To set the rotation angle, you need to specify an angle value ( deg ), the positive value is clockwise, and the negative value is counterclockwise.

Note: rotateZ(20deg) is equivalent to rotate(20deg). Of course, when it comes to 3D transformation, you can also write: rotate(x,x,x)