Créer des transformations en CSS

Dans les leçons précédentes, nous avons pu étudier les transitions et les animations en CSS qui permettent de modifier la valeur de certaines propriétés progressivement en fonction de certains critères (chargement de la page, passage de souris sur l’élément, etc.) et donc d’ajouter un côté interactif à nos pages web.

Le CSS va également nous permettre d’appliquer des transformations à nos éléments : on va pouvoir incliner nos éléments, les déformer, les translater, etc.

Dans cette leçon, nous allons expliquer en détail comment fonctionnent les transformations et apprendre à créer des transformations plus ou moins complexes.

 

Définir une transformation en CSS

La possibilité d’effectuer des transformations en CSS est récente et les possibilités et fonctionnalités des transformations sont donc aujourd’hui relativement limitées.

Cependant, on peut s’attendre à ce que de nouvelles fonctionnalités viennent s’ajouter aux transformations dans un futur proche.

A terme, les transformations en CSS devraient être définies par 3 critères qui vont pouvoir être renseignés via 3 propriétés CSS différentes :

• La propriété transform-box va nous permettre de définir une boite de référence qui va être utilisée pour calculer le point d’origine et pour réaliser la transformation en soi ;
• La propriété transform-origin va nous permettre de définir un point d’origine à partir duquel réaliser la transformation ;
• La propriété transform va nous permettre de définir un effet de transformation.

La propriété transform-box ne fait pas encore partie des recommandations du W3C et est toujours en développement. Il est donc déconseillé de l’utiliser pour l’instant puisque sa définition n’est pas encore stable et que le support par les navigateurs n’est pas assuré. Nous ne l’étudierons ainsi pas ici.

La propriété transform-origin permet de définir un point d’origine pour une transformation. Par défaut, le point d’origine est le centre de l’élément.

Cette propriété va pouvoir prendre une ou deux valeurs. En n’indiquant qu’une valeur, la valeur sera utilisée pour définir les coordonnées dans l’axe horizontal et dans l’axe vertical du point d’origine. En indiquant deux valeurs, la première valeur va permettre de définir la coordonnée horizontale du point d’origine tandis que la seconde valeur va permettre de définir sa coordonnée verticale.

Nous allons pouvoir passer les mots clefs top, right, bottom, left et center ainsi que des longueurs ou des pourcentages à cette propriété. Les valeurs de type longueur ou pourcentage vont définir l’éloignement du point d’origine à partir du bord supérieur gauche de la boite de référence.

La propriété transform va nous permettre de définir un ou plusieurs effets de transformation à appliquer à un élément : inclinaison, rotation, déformation, etc.

Cette propriété va accepter différents mots clefs ou plus exactement différentes fonctions qui vont définir le type de transformation qui va être appliqué à un élément. Nous allons étudier ces valeurs dans la suite de la leçon.

See the Pen Cours HTML CSS 12.3.1 by Pierre (@pierregiraud) on CodePen.

Dans le code ci-dessus, nous avons défini 4 transformations pour nos 4 div portant des attributs class.

Nous appliquons un premier effet de transformation à nos deux premiers div qui va être une translation, c’est-à-dire un déplacement selon une direction. Ici, on va donc déplacer nos deux div de 100px à partir de leur point d’origine vers la droite.

Ensuite, nous appliquons un effet de rotation à nos deux derniers div. La rotation va s’effectuer dans le sens des aiguilles d’une montre.

Le point d’origine de la transformation pour le premier div est son coin supérieur gauche tandis que cela va être le centre pour le deuxième. Comme la transformation n’est ici qu’un déplacement horizontal, modifier le point d’origine ne change pas le résultat de la transformation.

En revanche, cela va être différent pour une rotation : notre troisième div va pivoter autour d’un point central qui va être son coin supérieur gauche tandis que notre quatrième div va pivoter autour de son point central. Dans ce cas-là, modifier le point d’origine de la transformation change le résultat obtenu.

Finalement, vous pouvez noter ici qu’à la différence des transitions et des animations pour lesquelles on précise une durée, les transformations sont permanentes et les éléments vont conserver la transformation.

 

Exemples de transformations 2D

Nous allons pour le moment nous concentrer sur les effets de transformations en deux dimensions. En effet, vous devez savoir qu’on peut également aujourd’hui créer des transformations en 3D en rajoutant une perspective à nos éléments. Nous discuterons de cette possibilité plus tard.

Modifier la taille ou l’échelle d’un élément avec scale()

La fonction scale() permet de modifier la taille ou plus exactement l’échelle de l’élément. Nous allons pouvoir lui passer deux nombres qui vont correspondre au pourcentage d’agrandissement en largeur et en hauteur de l’élément.

Par exemple, en écrivant transform : scale(2, 0.5), l’élément va doubler en largeur et être diminué de moitié en hauteur.

Notez que cette fonction ne va pas affecter que les propriétés width et height de l’élément mais également s’appliquer au font-size et au padding.

Finalement, vous devez savoir que la fonction scale() est la notation raccourcie des fonctions scaleX() et scaleY() qui permettent de ne modifier que la largeur et la hauteur respectivement d’un élément.

See the Pen Cours HTML CSS 12.3.2 by Pierre (@pierregiraud) on CodePen.

Ici, on ne passe qu’une valeur à notre fonction scale() pour notre première transformation : cette valeur va donc être utilisée pour calculer la mise à l’échelle horizontale et verticale et notre div fera deux fois sa taille d’origine.

Pour notre deuxième transformation, on demande à ce que le div devienne deux fois plus large et qu’il soit deux fois moins haut.

Finalement, on utilise la fonction scaleX() pour définir notre dernière transformation qui ne va donc impacter que la largeur de l’élément.

Notez bien ici qu’appliquer une transformation à des éléments ne va pas modifier la taille de l’espace qui leur était attribué à la base ni donc faire bouger les autres éléments autour en conséquence. Il faudra donc faire bien attention à ce que nos éléments transformés chevauchent pas leurs voisins et ne dépassent pas de leur parent.

Déformer un élément avec skewX() et skewY()

Avant toute chose, il faut savoir que la fonction skew(), si elle existe, n’a été créée que pour des questions de compatibilité et qu’on ne devrait jamais l’utiliser.

A la place, il faudra plutôt utiliser les fonctions skewX() et skewY() qui vont nous permettre de déformer un élément selon son axe horizontal ou vertical.

Nous allons devoir passer un angle (généralement en deg) à ces deux fonctions qui va représenter l’angle selon lequel l’élément doit être déformé le long de l’axe correspondant.

See the Pen Cours HTML CSS 12.3.3 by Pierre (@pierregiraud) on CodePen.

Effectuer une translation avec translate(X,Y)

La fonction translate() va nous permettre de créer une translation, c’est-à-dire de déplacer un élément selon un certain vecteur (ou selon une certaine distance et direction, pour faire simple).

Là encore, on va pouvoir passer deux valeurs de type longueur à translate() pour spécifier les caractéristiques de la translation dans l’axe horizontal et dans l’axe vertical ou utiliser les versions complètes translateX() et translateY().

Les valeurs passées vont pouvoir être positives ou négatives. Une valeur positive pour l’axe horizontal va déplacer l’élément vers la droite tandis qu’une valeur positive pour l’axe vertical va déplacer l’élément vers le bas et inversement pour des valeurs négatives.

See the Pen Cours HTML CSS 12.3.4 by Pierre (@pierregiraud) on CodePen.

Effectuer une rotation avec rotate()

La fonction rotate() va nous permettre de faire pivoter un élément ou de lui faire effectuer une rotation selon un certain angle. Nous allons pouvoir lui fournir un angle (généralement en deg) en valeur.

La rotation va s’effectuer dans le sens des aiguilles d’une montre. Ainsi, indiquer rotate(90deg) va faire pivoter l’élément d’un quart de tour.

See the Pen Cours HTML CSS 12.3.5 by Pierre (@pierregiraud) on CodePen.

Définir une matrice de transformation avec matrix()

La fonction matrix() va nous permettre de définir notre propre matrice de transformation. Son utilisation est réservée aux personnes qui possèdent un bon degré de connaissance des transformations ET en mathématiques. Comme son usage est très marginal, je ne pense pas qu’il soit pertinent d’expliquer son fonctionnement en détail dans ce cours.

Appliquer plusieurs transformations d’un coup

Nous allons pouvoir définir plusieurs transformations à appliquer à un élément avec transform. Pour cela, il va suffire d’indiquer les différents effets de transformation à la suite.

Notez bien ici que les transformations ne vont pas toutes s’effectuer en même temps mais plutôt les unes à la suite des autres selon leur ordre de déclaration.

See the Pen Cours HTML CSS 12.3.6 by Pierre (@pierregiraud) on CodePen.

Expliquons le code ci-dessus. Ici, on applique les mêmes transformations à nos deux div mais pas dans le même ordre.

Le premier div auquel on applique une transformation va d’abord effectuer une translation de 100px vers la droite puis une rotation de 45 degrés dans le sens horaire.

Le deuxième div, au contraire, va lui d’abord effectuer une rotation de 45 degrés puis une translation de 100px. La différence est ici qu’après sa rotation l’axe horizontal du div (qu’il serait plus correct d’appeler l’axe des abscisses ou axe des X) est également incliné de 45 degrés et la translation va se faire selon cet axe.

Notre second div va donc être décalé de 100px selon cet axe incliné à 45 degrés.

Animer des transformations

Notez enfin qu’on va tout à fait pouvoir utiliser les transformations au sein d’animations en CSS. Cela va nous permettre d’ajouter un certain dynamisme à nos pages web.

See the Pen Cours HTML CSS 12.3.7 by Pierre (@pierregiraud) on CodePen.

 

Les transformations 3D

Finalement, vous devez savoir qu’on va également pouvoir créer des transformations en 3D, c’est-à-dire en rajoutant un axe Z qui va créer une perspective. Cet axe va nous permettre de simuler une profondeur et on va pouvoir ainsi faire comme si des éléments se rapprochaient ou s’éloignaient de l’utilisateur.

Avec les transformations 3D, nous commençons à toucher à des choses vraiment complexes en CSS et qui ne sont pas forcément pertinentes dans le cadre de ce cours complet car elles sont très peu utilisées et très spécifiques.

J’aborde ce sujet par souci d’exhaustivité mais je vais me contenter de vous expliquer rapidement le principe de fonctionnement des transformations 3D et vous donner quelques exemples qui me semblent les plus pertinents car encore une fois je ne pense pas qu’il soit pertinent de s’arrêter trop longtemps sur ces notions et d’essayer à tout prix de comprendre comment elles fonctionnent en détail.

Pour qu’une transformation 3D ait l’effet visuel escompté, il va déjà falloir créer un effet de perspective c’est-à-dire créer une impression d’espace 3D. Pour cela, nous allons utiliser la fonction perspective() avec nos effets de transformation.

La valeur passée à la fonction perspective() va définir l’intensité de l’effet 3D. On peut considérer qu’elle va représenter la distance entre l’utilisateur et l’élément. Plus la valeur passée à perspective() va être grande, plus l’élément sera éloigné de l’utilisateur au départ et moins l’effet 3D sera visible.

Ensuite, nous allons pouvoir définir nos effets de transformation 3D : mises à l’échelle en 3D, translations 3D ou rotations 3D. Nous allons également pouvoir créer nos propres transformations 3D grâce à la fonction matrix3d() mais il faudra pour cela comprendre comment fonctionne le calcul matriciel en mathématiques.

Pour chaque effet de transformation cité ci-dessus, nous allons soit pouvoir utiliser les fonctions scale3d(), translate3d() et rotate3d(), soit utiliser les notations longues scaleX(), scaleY(), etc. et en les complétant avec scaleZ(), translateZ() et rotateZ().

Voici deux exemples de translation et de rotation 3D qu’on va effectuer durant une animation :

See the Pen Cours HTML CSS 12.3.8 by Pierre (@pierregiraud) on CodePen.

See the Pen Cours HTML CSS 12.3.9 by Pierre (@pierregiraud) on CodePen.