CSS3 : les transformations
Publié le par É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.
Deux 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.
Cette 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);
Comme 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.
Inclinaison
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);
transform-origin: 50% 50%;
transform: skewY(20deg);
transform-origin: 0 0;
transform: skewY(20deg);
Ces fonctions prennent en paramètre, un angle en degrés, correspondant au degré d’inclinaison.