Maîtriser les fondamentaux de la 3D en CSS

Le 11/05/2017

Après la liste d'exemples de la semaine dernière, il est temps de commencer avec la 3D en CSS ! Comme d'habitude avec les deuxièmes jeudis du mois : les bases.

De la 3D en CSS : Les bases

Cet article le second d'une série initiée avec l'article Inspirations et techniques pour intégrateurs : De la 3D en CSS ! #1. Si vous ne l'avez pas lu, allez donc y faire un petit tour avant la fin de continuer cet article.

Comme pour tous les dossiers de cette série, nous ne reprendrons pas les bases de l'intégration, et il est important d'avoir de bonnes notions de HTML et CSS. Néanmoins, ce sujet est sans aucun doute le plus simple de tous ceux que nous allons aborder, et ne demande pas plus de connaissances préliminaires.

La 3D en CSS, la dure réalité

La propriété CSS transform

En 3D CSS, nous ne pouvons donc manipuler que des plans. Est-ce que cela va nous empêcher de travailler ? Non ! Il est tout à fait possible de considérer un cube comme une collection de 6 plans placés à différents endroits de l'espace, et c'est exactement comme cela que fonctionne la 3D en CSS.

La solution, c'est la propriété CSS3 transform qui nous l'apporte, majoritairement a travers la transformation rotate3d. Si vous ne vous sentez pas a l'aise avec cette propriété, je vous encourage à lire la page correspondante sur le MDN, ainsi que celle sur W3School, je trouve ces deux pages assez complémentaires.

Exemple 1 : CSS 3D Cube par Kamil Niftaliev

Commencons avec le HTML, dans lequel nous pouvons retrouver comme nous pouvions nous y attendre, un objet .cube contenant six faces .side .

C'est au niveau du CSS que nous retrouverons la partie la plus intéressante de ce pen, comme d'habitude. Évidemment, la partie qui ressort à la première lecture est la partie de la ligne 35 à la ligne 57, qui définit l'emplacement dans l'espace et la rotation de chacun des cotés, mais il existe une autre partie ESSENTIELLE a ce pen, sans quoi nous ne pouvons pas avoir la moindre 3D, et nous la retrouvons ligne 21 : transform-style: preserve-3d;

Note : transform-style est une propriété définissant si un élément possède un espace interne tridimensionnel ou non. Cette propriété peut avoir deux valeurs différentes : flat et preserve-3d, et bien évidemment, si elle est réglée sur flat (qui est la valeur par défaut) toute transformation 3D est "aplatie", comme une ombre projetée sur un mur.
Cette propriété est essentielle pour tout travail en 3D, mais est aussi un gros vecteur de ralentissement pour les petits PC, donc appliquez là avec discernement uniquement sur les éléments en ayant besoin.

Enfin, nous pouvons parler de la partie Javascript, qui ne fait qu'une chose : appliquer une transformation 3D au cube en lui-même lors de l'appui sur les touches flèches du clavier, ce qui permet de contrôler la rotation du cube.

Exercice maison

Pour aller plus loin et vous préparer pour la semaine prochaine, je vous propose d'essayer de décrypter seul l'exemple suivant, que j'avais fait il y a quelques années. Le Javascript n'est là que pour ajouter la class "is-folded" au click sur les faces du cube, et le reste devrait être compréhensible si vous vous en donnez la peine !

Indice : comment se fait-il qu'il n'y ait aucune transformation "translate" ? Comment les éléments sont-ils places les uns par rapport aux autres ?