CSS3 : les transformations

Évolution de l’actuelle version 2.1, le CSS3 apporte pas mal de nouveautés en ce qui concerne les styles : ombrages, animations, filtres, etc. Bien qu’étant encore officiellement en cours de développement, la plupart des fonctionnalités du CSS3 est déjà supporté dans les navigateurs actuels.

Dans cet article, nous allons voir plus en détails le fonctionnement des transformations. Ces transformations s’appliquent sur tout type d’élément HTML : des images, du texte, un dessin en SVG, des boutons, etc.

Tour d’horizon

Deux propriétés sont disponibles pour appliquer une transformation :

  • La propriété transform-origin qui permet de définir le point d’origine de la transformation. Cette propriété reçoit en paramètres les coordonnées du point d’origine.Ces coordonnées peuvent s’exprimer en pixels, en % ou bien en utilisant les mots-clef suivants : left, top, bottom ou right. Par défaut, ce point d’origine est le centre de l’élément;
  • La propriété transform qui permet d’appliquer la transformation. Cette propriété reçoit comme « valeur » une fonction correspondant à l’effet que l’on souhaite appliquer. Cette fonction contient également un ou plusieurs paramètres.

Selon les navigateurs, l’utilisation de ces propriétés peuvent requérir un préfixe.

Translation

La fonction translate() permet de déplacer un élément horizontalement et/ou verticalement :

transform; translate(25px, 25px);

Cette fonction prend en paramètres, le déplacement en pixels sur l’axe des x et des y à appliquer à l’élément HTML.

Transformations CSS3 : translationDeux autres fonctions dérivées de translate() existent :

  • La fonction translateX() qui permet d’effectuer un déplacement sur l’axe des x;
  • La fonction translateY() qui permet d’effectuer un déplacement sur l’axe des y;

Mise à l’échelle

La fonction scale() permet de remettre à l’échelle un élément. Cela se traduit par une modification de ses dimensions :

transform: scale(0.5);

Une valeur de 1 correspond à la taille d’origine. Une valeur inférieure à 1 rétrécira l’image, alors qu’au dessus de 1, l’image sera agrandi.

Transformations CSS3 : mise à l'échelleCette fonction peut prendre jusqu’à deux paramètres : la première valeur correspondra à la longueur, le second à la largeur. Le fait de ne pas spécifier de valeurs égales pour les deux paramètres aura pour effet d’étirer ou de comprimer l’image.

transform: scale(1.25, 0.5);

Transformations CSS3 : étirementComme avec la fonction translate(), deux autres fonctions dérivées de scale() existent :

  • La fonction scaleX() qui permet d’effectuer une mise à l’échelle de la longueur;
  • La fonction scaleY() qui permet d’effectuer une mise à l’échelle de la largeur;

Rotation

La fonction rotate() permet d’effectuer une rotation d’un élément :

transform-origin: 50% 50%;
transform: rotate(25deg);

transform-origin: 0 0;
transform: rotate(25deg);

Cette fonction prend en paramètre, un angle en degrés.

Transformations CSS3 : rotationInclinaison

Les fonctions skewX() et skewY() permettent d’effectuer une inclinaison de l’élément, respectivement sur l’axe des x et l’axe des y :

transform-origin: 50% 50%;
transform: skewX(20deg);

transform-origin: 0 0;
transform: skewX(20deg);

Transformations CSS3 : inclinaison horizontale

transform-origin: 50% 50%;
transform: skewY(20deg);

transform-origin: 0 0;
transform: skewY(20deg);

Transformations CSS3 : inclinaison verticaleCes fonctions prennent en paramètre, un angle en degrés, correspondant au degré d’inclinaison.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *