Retour au cours

Lesson 94: CSS Transforms (3D): perspective, translateZ, rotateX/Y

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

94. CSS Transforms (3D)

3D transforms allow movement along the Z-axis (depth) and rotation in 3D space. To make 3D effects visually apparent, you must define a perspective.

1. Defining Perspective

Perspective is set on the parent container and defines the depth of the 3D scene. A smaller value (e.g., 200px) creates a more dramatic, close-up perspective.

css .scene { perspective: 800px; /* Essential for 3D view */ }

2. Translate Z-axis (translateZ)

Moves the element closer to or further away from the viewer.

css .flying-text { transform: translateZ(100px); /* Moves 100px closer */ }

3. Rotation in 3D (rotateX, rotateY)

  • rotateX(): Rotates around the horizontal axis (flips top/bottom).
  • rotateY(): Rotates around the vertical axis (flips left/right).

css .flip-card-front:hover { /* Flips the card 180 degrees horizontally */ transform: rotateY(180deg); }

Note: When combining 2D and 3D transforms, it is crucial to use the shorthand translate3d(x, y, z) and scale3d(x, y, z) for GPU optimization, even if Z is 0.