Introduction aux transformations CSS 2D et 3D

CSS 3 apporte son lot de nouveautés.
Parmi elles, il existe un module entier dédié aux transformations, lui-même traitant de deux parties distinctes (même si le W3C tente de les réunir dans sa spécification) : les transformations 2D et les transformations 3D. Voyons ce que ça donne en pratique !

Transformations 2D

Les transformations 2D sont relativement aisées à appréhender, il s’agit de venir jouer sur différents paramètres afin de déformer un objet présent dans la page.

Rotations, inclinaisons, étirements, déplacements… cela ouvre quelques perspectives ! Seules les matrices vont être difficiles à appréhender sans un éditeur.

Classiquement, il suffira ensuite de cibler un élément par son sélecteur CSS, et de lui appliquer les propriétés suivantes :

transform pour définir le ou les effets (séparés par des espaces) ;
éventuellement transform-origin pour définir le point d’accroche du ou des effets.

Petite subtilité : l’ordre de déclaration des transformations multiples se lira de droite à gauche. Car oui, cela a son importance, comme l’illustre ce petit exemple.

Bref, rien que du très classique quand il s’agit de 2D.

Transformations 3D

Afin de réaliser un prototype pour un client, j’ai eu l’occasion de découvrir les transformations 3D. En voici donc un premier retour d’expérience.

Sachez tout d’abord que la facilité avec laquelle il est possible d’effectuer ces effets est désarmante. Cela peut sembler complexe de prime abord mais il n’en est rien finalement. La seule véritable complexité est de bien réfléchir dans les 3 dimensions et arriver à se représenter les axes X, Y et Z sur un écran par nature en 2 dimensions.

Pour débuter j’ai grandement été aidé par la démonstration technique proposée par Mozilla et créée par Chris Heilmann. En désactivant les rotations automatiques (réalisées elles aussi via CSS d’ailleurs) et en jouant ensuite avec chaque paramètre séparément, on comprend vite les actions de chaque propriété.

On notera alors quelques nouvelles propriétés spécifiques à la 3D :

perspective qui va permettre de définir la hauteur de l’effet de perspective appliqué (plus le chiffre est bas, plus l’effet de perspective est important) ;
transform-style qui active ou non la possibilité de se déplacer sur l’axe Z ;
backface-visibility qui affiche ou masque le « dos » d’un élément se retrouvant parfois visible via une transformation.

Le reste va fonctionner ensuite très naturellement. Si nous souhaitons par exemple reproduire un cube, il va s’agir de positionner dans l’espace 6 faces que nous allons ici composer avec de simples div.

Toutes les faces sont ensuite décalées sur l’axe Z de 100 pixels (j’imagine des arêtes de 200 pixels) puis chaque face est ensuite positionnée dans l’espace à l’aide des rotations en X et Y.

Le centre du cube est donc le point 0, 0, 0 (matérialisé dans cette démo par le croisement des 3 axes).

Pour mieux visualiser la construction j’ai ajouté une rotation globale sur le cube et un petit effet d’animation sur chaque face au survol.

Ce qui est intéressant ici, c’est non seulement la facilité avec laquelle le cube à été construit, mais également la possibilité de mixer cela avec les transitions CSS. En combinant les effets, on peut obtenir des résultats complexes sans pour autant avoir à écrire le moindre calcul mathématique.

Compatibilité

Question compatibilité, les transformations 3D vont fonctionner sur tous les navigateurs modernes, hormis IE9 et Opera. Il faut donc leur prévoir un affichage alternatif. Opera n’a rien annoncé pour l’avenir, mais IE supportera la fonctionnalité dès IE 10.

Notez que les préfixes sont encore à ce jour obligatoires (même si {le W3C à donné son {go pour qu’ils soient dorénavant supprimés}}), ce qui rappelle que cette technologie peut encore présenter quelques défauts. Ces mêmes propriétés préfixées devront nécessairement être réutilisées dans les transitions CSS, ce qui peut générer des lignes assez longues. Dans mon exemple, je passe plus simplement par la valeur all.

Si besoin, la bibliothèque JS Modernizer permet une détection très fine des possibilités offertes par les browsers.

Il suffira ensuite de préfixer ses sélecteurs CSS avec .csstransforms3d ou .no-csstransforms3d.

Ou encore côté JS de tester le booléen Modernizr.csstransforms3d.

Interactions

Une possibilité pour aller plus loin est de tenter d’animer l’effet 3D en fonction de la position du curseur. On peut ainsi imaginer que le point de fuite va se déplacer de manière à orienter la face du cube toujours « face » au curseur.

Pour cela nous allons avoir besoin d’un script qui va renvoyer la position du curseur et affecter en fonction une transformation 3D à notre cube.

Plusieurs choses intéressantes sont à noter :

Côté CSS j’utilise cette fois backface-visibility pour masquer les faces en arrière plan.
Puisque nous sommes déjà côté script, il n’y a aucun mal à ajouter une fonction qui se charge d’ajouter les préfixes navigateurs à la volée.
Toujours côté JS vous noterez la présence d’une fonction affine ce qui peut refroidir les moins matheux d’entre nous, mais c’est du niveau collège, pas de quoi paniquer. (J’ai quand même eu un peu de mal à m’y retrouver je l’avoue.)
La variable JS angleMax permet de définir la rotation maximale qui sera appliquée au cube (lorsque le curseur atteint les bords de l’écran donc).
Il serait tout à fait envisageable de faire évoluer ce script pour que sur des périphériques portables équipés d’un gyroscope, l’interaction se fasse en fonction de l’orientation du téléphone ou de la tablette plutôt qu’en fonction de la position du curseur.

Applications

Il ne reste maintenant plus qu’à digérer ces nouvelles possibilités et à en trouver des applications pratiques. Pour cela la section 3D de chez codrops est sans doute une des plus riches pour y trouver l’inspiration.