CSS Transform: Magic from plane to space

CSS Transform It is the cornerstone of the effectiveness of modern web pages. It allows us to rotate, zoom, tilt and position elements without affecting the normal document flow (Layout) of the page. This means that the transformation is done in the synthetic layer, and it's very high performance.

1. Distinction between 2D and 3D transformations

2D Transformation: Operates on the plane of the X-axis and the Y-axis. Most commonly, translate (diversion) and rotate (Turn)
3D Transformation: Z-axis (Depth) introduced. Pass. perspective And the properties, we can create real, near-small effects.

2. Specific issues addressed: interaction and performance

Scenario one: Central positioning. Traditional margin: auto Or percentage positioning is sometimes not perfect. Use position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); The gold standard of perfect living in perfect harmony.

Scene 2: High-performance animation. Change width or top You trigger a browser rewinding, and change. transform Only triggers repaint or synthesis, which ensures that animated art can reach 60FPS at the mobile end.

Scenario three: complex 3D flip. Like the card flip. Through Settings backface-visibility: hidden; and rotateY(180deg) , you can easily construct a very high-quality UI interaction.

3. Importance of changing origin

By default, the transformation is made around the centre of the element (50%). Change transform-origin The effect of the transformation can be radically changed. For example, set the original corner to the left (0%) (0%) The elements will swing like nails, not rotate.