Transforms 3D CSS

Optional Advanced vient de régler pointeur, caret et chrome natif. Cette dernière session optionnelle est une autre boîte : transforms 3D. Vous donnez à une carte un point de fuite et vous l’inclinez en profondeur. Vous ne refaites pas la leçon 2D translate / scale au survol, et vous ne choisissez ni curseur ni poignée de resize.

Réponse directe

Les transforms 3D CSS utilisent la même propriété transform qu’en 2D, plus la profondeur. Placez perspective sur un parent pour que les enfants partagent un point de fuite (perspective-origin le déplace). rotateX et rotateY inclinent autour des axes horizontal et vertical ; rotateZ est la rotation plate déjà connue. translateZ s’approche ou s’éloigne du spectateur. transform-style: preserve-3d garde les enfants dans une scène au lieu de les aplatir. backface-visibility: hidden masque une face quand elle se détourne — utile pour une carte à deux faces. L’emplacement de mise en page reste, comme en 2D. Angles modestes. Respectez prefers-reduced-motion.

Pourquoi ce n’est ni du mouvement 2D ni du chrome d’UI

La leçon transforms 2D a enseigné le mouvement dans le plan : translate, rotate, scale, skew et transform-origin comme charnière. Cela reste valable. La 3D ajoute une perspective façon caméra et des axes en plus. Le CSS interface était du chrome d’interaction (cursor, resize, caret-color, appearance). Une carte tournée n’a pas besoin d’une main menteuse, et la poignée d’un textarea n’est pas un point de fuite. Pour un lift de 2 px, restez en 2D.

Perspective — la caméra sur le parent

perspective est une longueur : plus petite, plus proche et dramatique ; plus grande, plus plate. Mettez-la sur la scène, pas sur chaque face, pour que les frères partagent un point de fuite.

Vous pouvez aussi écrire transform: perspective(800px) rotateY(18deg) sur un élément. Cette caméra n’appartient qu’à cette boîte. Pour un cube ou une rangée de tuiles, perspective sur le parent est plus calme. perspective-origin est le cousin point de fuite de transform-origin — il ne remplace pas le pivot de la face qui tourne.

Axes — rotateX, rotateY, rotateZ

Pensez à un livre. rotateY ouvre la couverture gauche–droite. rotateX la penche vers vous ou loin. rotateZ tourne sur la page — le rotate() 2D que vous connaissez.

Enchaînez avec des fonctions 2D au besoin : rotateY(16deg) translateZ(24px). L’ordre compte — les suivantes s’exécutent dans l’espace local des précédentes. Une seule liste transform, comme en 2D. Un rotateX(80deg) énorme sur tout un article, c’est une fête foraine, pas une UI.

translateZ — distance, pas une poussée de layout

Avec perspective, un translateZ positif vient souvent vers le spectateur. Les voisins du document ne s’écartent pas ; seule la peinture bouge, comme translate 2D.

Servez-vous de translateZ pour séparer les faces d’une scène, pas pour imiter margin ou un z-index ordinaire. z-index range encore les boîtes qui se chevauchent en layout 2D ; la distance 3D est un autre bouton. Si le travail est « soulever un jeton de 2 px », le translateY de la leçon 2D suffit.

preserve-3d — garder une scène, ne pas aplatir

Par défaut, un parent aplatit les enfants transformés (transform-style: flat). La relation 3D disparaît. Pour un cube, une couverture empilée ou une carte à deux faces, mettez preserve-3d sur l’enveloppe qui tourne.

Chaque ancêtre qui doit garder la profondeur a besoin de preserve-3d — un parent flat oublié tamponne le cube en affiche. Courant : perspective sur la scène extérieure, preserve-3d sur l’armature intérieure : caméra dehors, articulations dedans.

backface-visibility — cacher le verso

Quand une face dépasse 90°, vous verriez son miroir. backface-visibility: hidden enlève ce verso. Deux faces : avant rotateY(0), arrière rotateY(180deg), les deux position: absolute sur la même armature.

Sans versos cachés, un fantôme de l’avant transparaît. Ce n’est ni user-select: none ni appearance: none. Vous cachez une face peinte en 3D, vous n’ôtez pas la peau d’une case à cocher.

3D vs transform 2D vs chrome d’UI

Optional Advanced a déjà stylé les contrôles. Effects & Motion a déjà enseigné le mapping 2D. Ici, c’est la couche profondeur sur transform. Un cursor: pointer sur un titre parce qu’il a rotateY ne le rend pas 3D. perspective sur un login ne remplace pas resize sur un champ notes.

Habitudes calmes

Gardez la perspective en centaines de pixels pour les cartes d’UI (600px–1200px est une bande saine). Ne mettez pas perspective: 40px sur body. Couplez :hover ou une classe avec un transition court sur transform — comme en 2D. Coupez le fioriture avec prefers-reduced-motion: reduce (none ou un petit coup 2D). Le focus clavier a toujours besoin d’un anneau visible ; un retournement n’est pas un style de focus.

Ce survol est une inclinaison, pas le lift 2D translateY(-0.15rem) du jeton, ni resize: vertical sur un champ. Si les gens en mouvement réduit veulent une carte fixe, croyez-les.

À essayer vous-même

1. Enveloppez une carte dans .stage { perspective: 800px; } et mettez rotateY(20deg) sur l’enfant — puis déplacez perspective dans le transform de l’enfant et comparez les tuiles sœurs.
2. Montez une carte à deux faces : preserve-3d sur l’armature, backface-visibility: hidden sur les deux, verso rotateY(180deg).
3. Ajoutez translateZ(32px) sur le plan avant ; vérifiez que les voisins de layout ne bougent pas.
4. Retournez avec une classe + transition: transform — puis aplatissez avec prefers-reduced-motion.
5. Ne résolvez pas ça avec cursor, resize ou un survol seulement 2D translateY.

Erreurs fréquentes

• perspective: 50px sur body jusqu’à tordre toute la page
• Oublier preserve-3d sur l’enveloppe puis s’étonner d’un cube plat
• Prendre le lift 2D du jeton (translateY) pour une leçon 3D
• Utiliser le chrome d’UI (cursor, resize, appearance) à la place de la profondeur
• backface-visibility sur la scène plutôt que sur les faces
• Ignorer prefers-reduced-motion sur de grands retournements rotateY
• S’attendre à ce que la 3D change le flux du document comme margin

Résumé

• Les transforms 3D ajoutent de la profondeur à transform : perspective, rotateX / rotateY, translateZ
• perspective sur la scène parente ; preserve-3d pour que les faces imbriquées restent dans cet espace
• backface-visibility: hidden masque une face qui s’est détournée
• Ni leçon de survol 2D ni chrome d’interface
• Angles modestes ; respecter le mouvement réduit
• Dernière session CSS de ce cours — Optional Advanced s’arrête ici ; pas d’autre slug CSS sur la carte