Transformation 3D en CSS : donner de la profondeur avec perspective et rotateX

Une carte qui se retourne pour révéler un dos différent, un cube qui pivote sur lui-même, un menu qui semble s'incliner vers l'écran : ces effets qui donnent une réelle impression de profondeur, et non plus seulement un agrandissement ou une rotation à plat, relèvent de la Transformation 3D.

Elle prolonge transform en ajoutant un troisième axe, l'axe Z, perpendiculaire à l'écran, ainsi qu'une notion de scène en perspective, sans laquelle aucune transformation 3D ne produit d'effet de profondeur visible.

Définition

Une Transformation 3D applique des fonctions comme rotateX(), rotateY(), rotateZ() ou translateZ() à un élément, en plus des fonctions 2D habituelles. Contrairement à une rotation ou une translation classique, ces fonctions font pivoter ou avancer l'élément sur un axe qui sort de l'écran, ce qui suppose que le navigateur sache comment représenter cette profondeur en perspective.

.carte-3d {
  transform: rotateY(180deg);
  transition: transform 0.6s;
}

perspective doit être sur le parent, pas sur l'élément

Le piège le plus courant en Transformation 3D consiste à poser la propriété perspective directement sur l'élément qui pivote, sans effet visible. perspective définit la distance imaginaire entre l'œil de l'utilisateur et l'écran : elle doit être posée sur le conteneur parent, pour créer la scène en 3D dans laquelle l'élément enfant va évoluer, jamais sur l'élément transformé lui-même.

.conteneur-carte {
  perspective: 1000px;
}
.carte-3d {
  transform: rotateY(180deg);
}

translateZ() et l'illusion du rapprochement

translateZ() déplace un élément le long de l'axe de profondeur, vers l'utilisateur avec une valeur positive, ou en s'en éloignant avec une valeur négative. Combinée à perspective sur le parent, cette fonction donne l'illusion qu'un élément se rapproche ou s'éloigne réellement de l'écran, un effet impossible à obtenir avec scale() seul.

Un exemple concret : une carte qui se retourne au clic

Une carte de jeu de mémoire illustre bien l'usage combiné de perspective, rotateY() et backface-visibility. Le parent définit la scène en 3D, l'enfant pivote de 180 degrés au clic, et chacune de ses deux faces, avant et arrière, est positionnée en absolu l'une sur l'autre avec backface-visibility: hidden, pour que seule la face tournée vers l'utilisateur reste visible à tout moment de l'animation.

Sur les navigateurs ou les appareils plus anciens qui prennent mal en charge les effets 3D, mieux vaut prévoir un repli discret et sobre, comme un simple changement d'opacité, plutôt que de laisser un utilisateur face à un rendu figé ou visuellement déformé.

Le point d'origine et les problèmes d'empilement

Comme pour toute transformation, le pivot de la rotation dépend de transform-origin, souvent recentré manuellement pour une carte qui se retourne. Un élément transformé en 3D crée par ailleurs son propre contexte d'empilement, ce qui peut interférer avec z-index sur des éléments voisins mal anticipés.

Questions fréquentes

C'est presque toujours parce que la propriété perspective n'a été posée nulle part, ou qu'elle a été posée directement sur l'élément transformé au lieu de son conteneur parent : sans elle, le navigateur applique la rotation dans un espace sans profondeur, purement à plat.

Oui, exactement comme en 2D, en les écrivant l'une après l'autre dans la même déclaration transform, par exemple transform: rotateY(30deg) translateZ(50px), l'ordre d'écriture influençant le résultat final.

Oui, cette propriété liée décide si la face arrière d'un élément retourné à 180 degrés reste visible ou se cache. Sur une carte qui se retourne pour révéler un dos différent posé au verso, la régler sur hidden évite de voir le contenu avant apparaître inversé et transparent par-dessus.