Créer des transformations 3D en css3

— Publié le 18 avril 2020 —

Après les transformations 2D, les transitions et les animations, il est temps de passer au dernier article de la série, les transformations 3D.

Petit rappel pour bien visualiser le contexte :

• Les transformations 2D permettent de modifier l’apparence d’un élément en l’étirant, le déplaçant, le faisant tourner…
• Les transitions permettent de faire bouger un élément en le faisant passer d’un état à un autre
• Les animations sont plusieurs transitions à la suite

Aujourd’hui, nous allons aborder la perspective pour faire des transformations en 3D. Et comme vous savez déjà faire des animations, vous allez pouvoir faire… des animations 3D !

Principe des transformations 3D

Les transformations 3D utilisent la même propriété que les transformations 2D, à savoir la propriété « transform ».

En revanche, on a de nouvelles fonctions de transformations :

• rotate3d(x,y,z,angle) : pour des rotations en 3D.
• translate3d(x,y,z) : pour des déplacements en 3D.
• scale3d(x,y,z) : pour des changements d’échelle en 3D.
• matrix3d() : spécifie une matrice de transformation 4×4 avec 16 valeurs entre les parenthèses.

Ce sont les versions courtes mais on peut toujours utiliser les versions longues avec scaleX(), scaleY(),… en les complétant avec scaleZ(), translateZ() et rotateZ() qui précisent le 3ème axe. Vous noterez qu’on a perdu la fonction « skew ».

De nouvelles propriétés sont également apparues pour pouvoir gérer cet affichage en 3D :

• perspective : sans perspective, pas de 3D. Elle représente la notion de profondeur.
• perspective-origin : définit l’origine de la perspective (Là où les points de fuite des éléments se rejoignent).
• transform-style : définit si les éléments inclus subissent les transformations en 3D. 2 valeurs sont possibles : flat et preserve-3d.
• backface-visibility : précise si les faces arrières des éléments sont visibles ou non. 2 valeurs sont possibles : visible et hidden.

Découverte des différentes fonctions

Nous allons passer en revue les différentes fonctions pour que ce soit bien clair pour vous, avant de passer à un exemple concret.

Définir la perspective

La perspective est la dimension qui permet de donner de la profondeur à un objet et donc de donner l’effet 3D. C’est une notion fréquemment utilisée en dessin pour faire des croquis réalistes. Elle est représentée par la distance entre l’oeil et la scène. Une perspective faible donne l’impression d’être proche de la scène ; une perspective élevée donne une impression de distance lointaine.

On peut utiliser la perspective via la propriété transform ou via la propriété perspective. Nous allons privilégier cette 2nde méthode car elle s’applique sur plusieurs éléments alors que la 1ère ne concerne qu’un élément. :

Définir l’origine du point de fuite

Voici une autre notion à bien comprendre pour réaliser des transformations 3D : le point de fuite. Il indique le sens dans lequel regarder la scène, c’est son point d’ancrage. Il peut y avoir plusieurs points de fuite, voici 3 exemples :