Animer votre page avec des transformations CSS

Les transformations CSS (Cascading Style Sheets) vous permettent de convertir des éléments en espaces 2D et 3D. Les transformations CSS vous permettent de modifier la position d’un élément au sein de son parent, de manipuler son échelle ou sa rotation et d’appliquer des déformations d’inclinaison. L’ajout de la propriété perspective (ou la fonction de transformation perspective) ajoute une troisième dimension aux transformations.

Nous présentons ici le système de coordonnées de transformation CSS. Nous décrirons ensuite la fonctionnalité de transformation exposée par CSS et terminerons en illustrant l’effet de la propriété perspective.

Systèmes de coordonnées pour les transformations CSS

Les transformations CSS sont définies le long d’un ensemble d’axes qui forment un système de coordonnées. Les transformations 2D sont définies le long de deux axes, comme illustré ici. Gardez à l’esprit que l’axe y s’étend vers le bas et non vers le haut comme la plupart des systèmes de coordonnées cartésiens 2D sont rendus.

Image d’un système de coordonnées 2D ; l’axe X s’étend vers la droite et l’axe Y s’étend vers le bas

L’axe x du système de coordonnées s’étend le long de la dimension horizontale du nœud parent de l’élément qui est transformé. L’axe y s’étend le long de la dimension verticale. Le point d’origine (« (0,0) » dans le diagramme) de ce système de coordonnées figure au départ au centre de l’élément qui est transformé (sauf s’il est modifié par la propriété transform-origin, abordée plus loin).

Les transformations 3D sont définies le long de trois axes, comme illustré ici. (Le quadrillage est inclus pour mieux visualiser l’image en 3D.)

Image d’un système de coordonnées 3D ; l’axe Z supplémentaire est parallèle aux deux axes X et Y

L’axe z du système de coordonnées est perpendiculaire aux deux axes x et y. Le point d’origine (« (0,0,0) » dans le diagramme) de ce système de coordonnées figure également au centre de l’élément qui est transformé, sauf s’il est modifié par la propriété transform-origin.

Application de transformations

L’application de transformations à un élément est simple. Ajoutez d’abord la propriété transform à un sélecteur, puis ajoutez une liste de fonctions de transformation. Par exemple, la déclaration suivante applique une transformation de translation :


transform: translateX(400px);

Le résultat de cette transformation est que l’élément d’origine est transféré (déplacé) de 400 pixels vers la droite. Si nous appliquons cette transformation à l’élément div d’un carré vert, nous obtenons le résultat suivant. À des fins d’illustration, l’élément tel qu’il apparaît avant l’application de la transformation s’affiche en plus de l’élément transformé, et l’élément d’origine est estompé.

Image d’un carré vert clair avant et après l’application d’une fonction de translation horizontale

Vous pouvez afficher une version active de cet exemple. Gardez à l’esprit que, pour obtenir une compatibilité de navigateur maximale, vous devez inclure les préfixes spécifiques aux navigateurs appropriés avant la propriété de transformation pour chacun des navigateurs que vous envisagez de prendre en charge. Par exemple, les déclarations suivantes assurent la prise en charge dans Windows Internet Explorer 9 (« -ms- »), Chrome et Safari (« -webkit- »), Firefox (« -moz- »), Opera (« -o- »), et les navigateurs qui ne nécessitent pas de préfixe, comme Internet Explorer 10.


  -ms-transform: translateX(400px);
  -webkit-transform: translateX(400px);
  -moz-transform: translateX(400px);
  -o-transform: translateX(400px);
  transform: translateX(400px);

Fonctions de transformation 2D

Ces fonctions de transformation sont prises en charge pour être utilisées dans les transformations 2D, et sont disponibles depuis Internet Explorer 9.

FonctionDescription

matrix(a, b, c, d, e, f)

Spécifie une transformation 2D sous la forme d’une matrice de transformation de six valeurs.

rotate(angle)

Spécifie une rotation 2D selon l’angle indiqué dans le paramètre sur l’origine de l’élément.

scale(sx,sy)

Spécifie une opération de mise à l’échelle 2D par le vecteur de mise à l’échelle [sx,sy] décrit par les deux paramètres.

scaleX(sx)

Spécifie une opération de mise à l’échelle avec le vecteur de mise à l’échelle [sx,1], sx étant le paramètre donné.

scaleY(sy)

Spécifie une opération de mise à l’échelle avec le vecteur de mise à l’échelle [1,sy], sy étant le paramètre donné.

skew(angleX,angleY)

Spécifie une transformation d’inclinaison le long des axes x et y. Le premier paramètre d’angle indique l’inclinaison sur l’axe x. Le second paramètre d’angle indique l’inclinaison sur l’axe y.

skewX(angle)

Spécifie une transformation d’inclinaison le long de l’axe x en fonction de l’angle donné.

skewY(angle)

Spécifie une transformation d’inclinaison le long de l’axe y en fonction de l’angle donné.

translate(tx,ty)

Spécifie une translation 2D en fonction du vecteur [tx,ty], où tx correspond au premier paramètre translation-value et ty au second paramètre translation-value facultatif.

translateX(tx)

Spécifie une translation dans la direction x en fonction de la valeur indiquée.

translateY(ty)

Spécifie une translation dans la direction y en fonction de la valeur indiquée.

 

Pour les fonctions de translation, les arguments peuvent être des types de longueur CSS pris en charge ou un pourcentage. Pour les fonctions de rotation et d’inclinaison, les arguments peuvent être des types d’angles CSS pris en charge ou des chiffres bruts (qui sont interprétés comme des rotations en degrés). Enfin, les fonctions de mise à l’échelle acceptent les arguments numériques, qui représentent les facteurs de mise à l’échelle.

Exemples de transformations 2D

Examinons à présent plusieurs applications de transformations CSS 2D.

Commençons par une translation le long de l’axe y. Gardez à l’esprit que les valeurs de translation sont interprétées comme des décalages à partir de la position d’origine de l’élément dans la mise en page.

Image d’un carré bleu avant et après l’application d’une fonction de translation verticale

Afficher une démonstration en direct de cet exemple.

Essayons à présent d’effectuer des opérations de rotation, d’inclinaison et de mise à l’échelle. Cette capture d’écran illustre l’élément div d’un carré, répété, avec une transformation appliquée à chaque répétition.

Capture d’écran illustrant la rotation, l’inclinaison et la mise à l’échelle d’un carré jaune par différentes fonctions de transformation

Afficher une démonstration en direct de cet exemple.

La fonction de transformation matrix n’est pas présentée ici. Elle vous permet de spécifier une transformation 2D personnalisée manuellement. Nous vous conseillons de vous familiariser avec les systèmes de coordonnées de transformation et le rendu avant d’essayer de spécifier des transformations manuellement.

Application de plusieurs transformations

Vous pouvez appliquer plusieurs transformations en les liant—ajoutant plusieurs fonctions de transformation à une seule propriété de transformation dans l’ordre dans lequel vous voulez les appliquer. Gardez à l’esprit que l’ordre dans lequel les transformations sont ajoutées affecte le résultat final. Examinons un exemple.

Les déclarations suivantes peuvent sembler identiques, mais elles produisent des résultats différents.


transform: rotate(45deg) translateX(200px);
transform: translateX(200px) rotate(45deg);

Vous pouvez afficher ces deux déclarations appliquées à différents éléments div ici. Voici une capture d’écran de cet exemple. La position de l’élément d’origine est indiquée par la zone grise. La fonction translateX et la fonction rotate ont été appliquées à la zone violette (supérieure). La zone rose (inférieure) pivote d’abord, puis est transférée.

Image illustrant deux transformations appliquées à un élément div

Modification de l’origine de la transformation

Examinons la transformation suivante :


transform: rotate(45deg);

Image de l’élément div d’un carré rouge auquel deux transformations ont été appliquées

Afficher cet exemple dans votre navigateur.

L’élément transformé pivote autour de son centre. Mais que faire si nous voulons que l’élément pivote plutôt autour de l’un de ses coins ? Ou autour d’un point arbitraire ? C’est là que la propriété transform-origin entre en jeu.

La propriété transform-origin vous permet d’indiquer l’origine des transformations d’un élément. Dans le cas de rotations, la modification de la valeur de l’origine de la transformation déplace le centre de rotation. La valeur initiale de la propriété transform-origin est "50% 50%", ce qui signifie que l’origine se trouve au centre de l’élément. Il s’agit de la valeur implicite si la propriété transform-origin n’est pas spécifiée.

Examinons quelques exemples de l’application de cette même déclaration rotate à des éléments avec différentes valeurs affectées à la propriété transform-origin. Cet exemple de page inclut le même élément, répété, avec la même transformation appliquée, mais avec différentes origines de transformation. Cet exemple de page est semblable, sauf qu’une transformation d’inclinaison est appliquée.

Nous allons ensuite commencer à ajouter de la profondeur à nos pages Web en utilisant les transformations CSS 3D.

Fonctions de transformation 3D

Avec Internet Explorer 10, les concepteurs peuvent entrer dans la troisième dimension en utilisant les transformations CSS 3D. Les fonctions de transformation répertoriées ici sont prises en charge pour être utilisées dans les transformations 3D, et sont disponibles depuis Internet Explorer 10.

Les transformations 3D sont appliquées de la même manière que les transformations 2D (en ajoutant une propriété transform au style de l’élément). Pour tirer parti de la troisième dimension, la liste des fonctions de transformation disponibles est développée pour inclure les fonctions suivantes :

FonctionDescription

rotate3d(x, y, z, angle)

Spécifie une rotation 3D dans le sens des aiguilles d’une montre.

rotateX(angle)

Spécifie une rotation dans le sens des aiguilles d’une montre selon l’angle donné par rapport à l’axe x.

rotateY(angle)

Spécifie une rotation dans le sens des aiguilles d’une montre selon l’angle donné par rapport à l’axe y.

rotateZ(angle)

Spécifie une rotation dans le sens des aiguilles d’une montre selon l’angle donné par rapport à l’axe z.

scale3d(sx,sy,sz)

Spécifie une opération de mise à l’échelle 3D par le vecteur de mise à l’échelle [sx,sy,sz] décrit par les trois paramètres.

scaleZ(sz)

Spécifie une opération de mise à l’échelle avec le vecteur de mise à l’échelle [1,1,sz], sz étant le paramètre donné.

translate3d(tx, tytz)

Spécifie une translation 3D par le vecteur [tx,ty,tz], où tx, ty et tz sont respectivement les premier, deuxième et troisième paramètres translation-value.

translateZ(tz)

Spécifie une translation dans la direction z en fonction d’une valeur indiquée.

matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p)

Spécifie une transformation 3D en tant que matrice homogène 4×4 de seize valeurs dans l’ordre column-major.

 

Examinons quelques exemples de transformations 3D en action. Cet exemple de page comporte une ligne de carrés, avec une ou plusieurs transformations appliquées à chacun d’eux.

Vous avez probablement noté que ces transformations ne semblent pas être en 3D. Dans la mesure où une telle transformation fait pivoter l’élément le long de l’axe x ou y « sur l’écran », vous pourriez penser que l’élément doit paraître de plus en plus petit. La fonction translateZ(-50px) ne modifie pas du tout l’aspect visuel de l’élément ! Cela se produit, car les transformations CSS sont calculées par défaut à l’aide d’une projection orthographique, une méthode de représentation d’un élément 3D sur deux dimensions. Une carte du monde 2D est un exemple de projection orthographique que vous connaissez probablement. En utilisant des transformations CSS, vous obtenez des objets qui ne semblent pas plus petits lorsqu’ils s’éloignent de la visionneuse.

Heureusement, la spécification sur les transformations CSS fournit une propriété qui nous permet aisément d’ajouter une perspective à vos transformations.

Ajout d’une perspective aux transformations 3D

La propriété perspective ajoute une illusion de profondeur aux transformations CSS.

FonctionDescription

perspective

Spécifie une valeur de longueur qui représente la perspective à partir de laquelle tous les éléments enfants de l’objet sont visualisés.

 

Examinez le diagramme suivant :

Diagramme illustrant l’effet de la perspective sur l’aspect des éléments visuels

Notez la façon dont les éléments enfants sont aplatis (ou projetés) sur l’élément parent. La surface des projections produites (en orange sur le diagramme) est un facteur de la distance entre les éléments et le plan image défini par l’élément parent (qui est basé sur la combinaison des transformation 3D que nous avons définie pour lui). En outre, la distance entre l’élément parent lui-même et la « visionneuse » (désignée sous le nom de profondeur de perspective dans le diagramme précédent) est également prise en compte. La propriété CSS perspective nous permet de spécifier cette distance.

À titre d’exemple, examinons les mêmes transformations utilisées dans l’exemple précédent mais, cette fois, en appliquant la projection de perspective.

Dans cet exemple, nous appliquons une propriété perspective, dont la valeur est de 200 pixels, à l’élément parent des éléments div. Notez que, lorsque vous pointez sur les éléments (ou appuyez dessus), le résultat visuel des transformations est effectivement en 3D. La transformation translateZ fonctionne comme prévu (en d’autres termes, l’élément est « éloigné » de la visionneuse et devient plus petit). Notez également que nous pouvons combiner des transformations 3D de la même manière que des transformations 2D.

Il est également possible de régler avec précision les transformations 3D à l’aide de la propriété perspective-origin. La propriété perspective-origin définit la position de la visionneuse par rapport à l’élément auquel la transformation de perspective est appliquée. Autrement dit, elle nous permet de créer des projections hors axe.

Cet exemple de page est identique au précédent, sauf que la propriété perspective-origin a la valeur "30% 50%".

La valeur par défaut de perspective-origin est "50% 50%", ce qui implique que la position de visualisation est parallèle au milieu de l’élément. Dans l’exemple précédent, nous avons décalé la position de visualisation vers la gauche ("30% 50%"). Dans l’exemple suivant, vous pouvez voir la différence lorsque nous décalons plutôt vers la droite en affectant à la propriété perspective-origin la valeur "80% 50%".

Conclusion

Jusqu’à présent, nous avons décrit les transformations CSS 2D et 3D ainsi que certaines de leurs propriétés associées (transform-origin, perspective et perspective-origin).

Nous allons ensuite présenter les transitions CSS.

Rubriques connexes

Pour en savoir plus sur les transformations CSS, consultez les sources de référence suivantes :

 

 

Afficher: