Transformations 3D : rotateX, rotateY, translateZ
Faites pivoter et déplacez des éléments dans un espace tridimensionnel avec les fonctions de transformation 3D CSS.
Transformations 3D : rotateX, rotateY, translateZ est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Présentation des transformations 3D
Les transformations 3D du CSS étendent le système 2D à une troisième dimension grâce à l’axe Z. Activez la 3D avec une propriété perspective sur le parent et transform-style: preserve-3d pour les éléments 3D imbriqués.
rotateX()
rotateX(angle) fait pivoter un élément autour de l’axe horizontal X, comme lorsqu’on retourne une page vers soi ou à l’opposé.
<div class="page"><div class="leaf">Leaf</div></div>rotateY()
rotateY(angle) fait pivoter un élément autour de l’axe vertical Y, comme une porte autour de ses charnières.
<div class="card-flip demo-active"><div class="card">Card</div></div>rotateZ()
rotateZ(angle) est identique à la fonction 2D rotate() : il s’agit d’une rotation dans le plan de l’écran.
rotate3d()
rotate3d(x, y, z, angle) fait pivoter un élément autour d’un vecteur d’axe 3D personnalisé. Les valeurs x, y et z définissent la direction de l’axe.
<div class="element">3D</div>translateZ()
translateZ() déplace un élément vers l’utilisateur ou l’en éloigne le long de l’axe Z. Les valeurs positives le rapprochent ; les valeurs négatives l’éloignent.
<div class="scene-z">
<div class="layer-front">Front</div>
<div class="layer-back">Back</div>
</div>translate3d()
translate3d(x, y, z) déplace un élément simultanément selon les trois axes. Utiliser translateZ(0) force la promotion vers une couche du GPU, une astuce courante d’optimisation des performances.
<div class="animated">GPU layer</div>scale3d()
scale3d(x, y, z) redimensionne un élément dans les trois dimensions. scaleZ() redimensionne la profondeur, ce qui est utile pour les faces d’un cube 3D.
Exemple de cube 3D
Construire un cube à l’aide de transformations 3D appliquées à six faces :
<div class="cube-scene">
<div class="cube">
<div class="cube-face front">Front</div>
<div class="cube-face back">Back</div>
<div class="cube-face left">Left</div>
<div class="cube-face right">Right</div>
<div class="cube-face top">Top</div>
<div class="cube-face bottom">Bottom</div>
</div>
</div>Effet 3D de parallaxe
Utiliser translateZ sur les éléments enfants crée de la profondeur dans une scène 3D défilante, selon un effet de parallaxe CSS :
<div class="parallax-scene">
<div class="far-layer">Far layer</div>
<div class="close-layer">Close layer</div>
</div>Accélération matérielle
Les transformations 3D, même insignifiantes comme translateZ(0), forcent l’élément à utiliser sa propre couche du GPU. Cela évite de repeindre l’écran pendant l’animation, mais consomme de la mémoire du GPU. Utilisez cette technique intentionnellement, et non comme une solution universelle.
Vérification rapide
Quelle fonction de transformation déplace un élément le long de l’axe Z, vers l’utilisateur ou à l’opposé ?
Récapitulatif
Les transformations 3D du CSS utilisent rotateX/Y/Z() pour les rotations autour de chaque axe et translateZ() pour les déplacements en profondeur. Activez la véritable 3D avec perspective sur le parent et transform-style: preserve-3d. Utilisez backface-visibility: hidden pour les effets de retournement. Les transformations 3D forcent la promotion vers une couche du GPU afin d’obtenir des animations fluides.
Questions Fréquemment Posées
La leçon « Transformations 3D : rotateX, rotateY, translateZ » est-elle gratuite ?
Oui — le texte complet de « Transformations 3D : rotateX, rotateY, translateZ » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Transformations 3D : rotateX, rotateY, translateZ » ?
Faites pivoter et déplacez des éléments dans un espace tridimensionnel avec les fonctions de transformation 3D CSS. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Transformations 3D : rotateX, rotateY, translateZ » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Translate, Rotate et Scale
- Transformations par inclinaison et matrice
- Origine et perspective des transformations
- Transformations 3D : rotateX, rotateY, translateZ