Plus qu’une simple règle, CSS transform est une propriété « valise » permettant de jouer avec un élément pour lui donner un aspect visuel spécifique sans le sortir du flux. Combiné avec les propriétés d’animation, vous pourrez facilement moderniser vos designs en quelques lignes.
Définir une transformation
Comme évoqué en introduction, la propriété transform permettra plusieurs types de manipulations d’un élément.
La translation
Elle permettra de déplacer l’élément en le faisant « glisser » sur un ou plusieurs axes.
/* Translation d'un élément sur les axes X et Y */
transform: translate(12px, 50%);
/* Translation d'un élément sur un axe unique X, Y ou Z */
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
/* Translation 3D d'un élément sur les axes X, Y et Z */
transform: translate3d(12px, 50%, 3em);
La mise à l’échelle
Comme son nom l’indique, elle jouera sur l’échelle de l’élément ciblé
/* Mise à l'échelle d'un élément sur les axes X et Y */
transform: scale(2, 0.5);
/* Mise à l'échelle d'un élément sur un axe unique X, Y ou Z */
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
/* Mise à l'échelle 3D d'un élément sur les axes X, Y et Z */
transform: scale3d(2.5, 1.2, 0.3);
La torsion
Très utile pour simuler une mise en perspective, elle transformera un carré en Parallélépipède oblique.
/* Torsion d'un élément sur sur les axes X et Y */
transform: skew(30deg, 20deg);
/* Torsion d'un élément sur un axe unique X, Y */
transform: skewX(30deg);
transform: skewY(1.07rad);
La rotation
Cette fonctionnalité jouera sur l’inclinaison de l’élément. Sa valeur ne sera donnée en degré ; écrit deg
/* Rotation d'un élément sur les axes X et Y */
transform: rotate(0.5turn);
/* Rotation d'un élément sur un axe unique X, Y ou Z */
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
/* Rotation 3D d'un élément sur un axe unique X, Y ou Z */
transform: rotate3d(1, 2.0, 3.0, 10deg);
La perspective
Elle simulera l’effet de perspective donné à un élément.
/* Simulation d'un effet de perspective */
transform: perspective(17px);
La transformation matricielle
La propriété transform:matrix() regroupera plusieurs transformation (scale, rotate, skew et translate) en une seule fois.
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);L’accumulation de transformations
Il sera également possible de combiner plusieurs type de modifications au seins de la règle transform:. Dans l’exemple ci-dessous, nous modifierons l’échelle et la rotation de notre élément.
transform: scale(50%) rotate(45deg);Le point d’origine
Toutes les transformations géométriques se font par rapport à un point d’origine. Par défaut ce point est situé au centre de la boîte. Il peut être nécessaire de manipuler la position de ce point d’origine pour faciliter les manipulations.
La propriété transform-origin va nous permettre de définir l’emplacement du point d’origine servant de référence à notre manipulation.
Dans l’exemple suivant, nous le reportons à l’angle haut/droit de notre objet pour pouvoir effectuer une rotation de 45° autour de cette nouvelle référence au moment du survol de l’objet.
.mon_objet:hover{
transform-origin : right top;
transform : rotate(45deg)
}