Les transformations permettent de modifier, avec des propriétés CSS, l’affichage d’éléments HTML d’une page. Une fois affiché de manière « classique », un élément HTML pourra « subir » des transformations.
Pour effectuer une transformation, la propriété transform est employée. Cette propriété utilise ensuite des fonctions pour appliquer telle ou telle transformation.
La syntaxe est simple d'emploi:
transform: function(value);
Il est souvent nécessaire d'utiliser les préfixes vendeurs (-webkit-, -moz-, etc.) devant la propriété transform pour utiliser les transformations 2D sur les versions actuelles et passées de navigateurs.
caniuse.
Par défaut, toutes les transformations ont comme point de référence le centre de l’élément. Ce point de référence sert de départ pour les calculs des transformations. Ce point de référence peut être modifié avec la propriété transform-origin. La valeur spécifiée indique alors le point de référence.
transform: rotate(valeur);
La fonction rotate utilise des valeurs exprimées en degrés (deg) ou en radians (rad), elle permet de tourner les éléments.
transform: scale(valeur);
La fonction scale permet une mise à l’échelle d’un élément selon un ratio, sur une échelle de 0 à 1.
1 étant la taille initiale, une valeur inférieure à 1 aura pour conséquence de réduire l’élément, un chiffre supérieur à 1 va l’agrandir.
La place occupée dans le flux demeure identique : si l’élément est agrandi, ses frères ne seront pas poussés en conséquence.
transform: scale(valeurX,valeurY);
transform: translate(valeur);
translate, translateX, translateY (déplacement)
La fonction translate permet de réaliser un déplacement, sur une distance spécifiée, par rapport à sa position d’origine et selon le point de référence.
Une translation sur l'axe X (valeurX) ou Y (valeurY) uniquement peut être opérée.
transform: translate(valeurX,valeurY);
transform: skew(valeur);
La fonction skew permet d’effectuer une déformation de l’élément sur les deux axes (d'obliquer la forme d'un élément).
L’unité peut s’exprimer en degrés : deg ou en radians : rad.
transform: skew(valeurX,valeurY);
Il est également possible d'effectuer des transformations combinées en espaçant les fonctions d'un espace :
transform : function1(value1) function2(value2) function3(value3);
Exemple :
transform: skew(30deg,15deg) translate(10px,0px) rotate(-30deg);
Cependant, l'ordre des fonctions a son importance. En effet, les transformations se font dans l'ordre où elles sont déclarées, ainsi une translation de 20px est équivalente à 40px si un scale de 2 la précède.
Attention donc à l'ordre de déclaration de ces fonctions.
Cette fonction permet de réunir en une seule déclaration toutes les fonctions précédentes que nous avons vu ensemble sous la forme d'une matrice.
Exemple :
div {
transform-origin: 0 0;
transform: rotate(15deg) translateX(230px) scale(1.5, 2.6) skew(220deg, -150deg) translateX(230px);
}
Equivaut à :
div {
transform-origin: 0 0;
transform: matrix(1.06, 1.84, 0.54, 2.8, 466px, 482px);
}
Très concrètement, les détails ne seront pas abordés ici car ils font beaucoup plus appel à des notions mathématiques complexes que beaucoup d'entre nous ont mis de côté.
Pour comprendre comment fonctionne cette fonction :
The CSS3 matrix() Transform for the Mathematically Challenged.
Et sachez qu'il existe un éditeur en ligne qui vous permet de manipuler une boîte dans le but d'obtenir des coordonnées matricielles : www.useragentman.com/matrix/