La propriété transform nous permet de manipuler visuellement un élément en l'inclinant, le faisant pivoter, le translatant ou le mettant à l'échelle :

.element {
  width: 20px;
  height: 20px;
  transform: scale(20);
}

Même avec une hauteur et une largeur déclarées, cet élément sera maintenant mis à l'échelle à vingt fois sa taille d'origine :

voir Transform explanation de css-tricks dans CodePen

En donnant deux valeurs à cette fonction, nous l'étirons horizontalement de la première valeur (2) et verticalement de la seconde (0.5). Dans l'exemple suivant, l'élément sera désormais deux fois plus large et deux fois moins haut que l'élément d'origine :

.element {
  transform: scale(2, 0.5);
}

Nous pouvons être plus précis, en n'utilisant pas la fonction de raccourci :

transform: scaleX(2);
transform: scaleY(0.5);

Mais scale() n'est qu'une des nombreuses fonctions de transformation disponibles.

Valeurs

scale() : Affecte la taille de l'élément. Cela s'applique également à la taille de la police, au padding, à la hauteur et à la largeur d'un élément. Il s'agit également d'une fonction raccourcie pour les fonctions scaleX() et scaleY().

skewX() et skewY() : Incline un élément vers la gauche ou la droite, comme pour transformer un rectangle en parallélogramme. skew() est un raccourci qui combine skewX() et skewY() en acceptant les deux valeurs.

translate() : Déplace un élément latéralement ou de haut en bas.

rotate() : Fait pivoter l'élément dans le sens des aiguilles d'une montre à partir de sa position actuelle.

matrix() : Une fonction qui n'est probablement pas destinée à être écrite à la main, mais qui combine toutes les transformations en une seule.

perspective() : N'affecte pas l'élément lui-même, mais affecte les transformées des éléments descendants en 3D, leur permettant d'avoir tous une perspective de profondeur cohérente.

• Skew
• Rotate
• Translate
• Valeurs multiples
• Matrix
• 3D transform

Skew

/* Skew points along the x-axis */
.element {
  transform: skewX(25deg);
}

/* Skew point along the y-axis */
.element {
  transform: skewY(25deg);
}

/* Skew points along the x- and y-axis */
.element {
  transform: skew(25deg, 25deg);
}

Les fonctions de transformation skewX et skewY inclinent un élément dans un sens ou dans l'autre. N'oubliez pas : il n'existe pas de propriété raccourcie pour incliner un élément, vous devrez donc utiliser les deux fonctions. Dans l'exemple ci-dessous, nous pouvons incliner un carré de 100px x 100px vers la gauche et la droite avec skewX :

voir Transform explanation de css-tricks dans CodePen

Dans cet exemple, nous inclinons un élément verticalement avec avec skewY :

voir Transform explanation de css-tricks dans CodePen

Utilisons maintenant skew() pour combiner les deux :

voir Transform explanation de css-tricks dans CodePen

Rotate

.element {
  transform: rotate(25deg);
}

Ce CSS fait tourner un élément dans le sens des aiguilles d'une montre par rapport à sa position d'origine, tandis qu'une valeur négative le ferait tourner dans le sens inverse. Voici un exemple animé simple où un carré tourne en continu de 360 degrés toutes les trois secondes :

voir Transform explanation de css-tricks dans CodePen

Nous pouvons utiliser les fonctions rotateX, rotateY et rotateZ, comme suit :

voir Transform explanation de css-tricks dans CodePen

Translate

.element {
  transform: translate(20px, 10px);
}

Cette fonction de transformation déplace un élément latéralement, ou de haut en bas. Pourquoi ne pas utiliser simplement haut/gauche/bas/droite ? C'est parfois un peu confus. Personnellement, je considère ces fonctions comme des fonctions de mise en page/positionnement (elles sont mieux supportées par les navigateurs de toute façon) et cette fonction comme un moyen de déplacer ces éléments dans le cadre d'une transition ou d'une animation.

Ces valeurs pourraient être n'importe quelle valeur de longueur, comme 10px ou 2.4em. Une valeur déplacera l'élément vers la droite (les valeurs négatives vers la gauche). Si une deuxième valeur est fournie, cette deuxième valeur le déplacera vers le bas (valeurs négatives vers le haut). Vous pouvez aussi être plus spécifique :

transform: translateX(value);
transform: translateY(value);

Il est important de noter qu'un élément utilisant la fonction transform ne fera pas circuler les autres éléments autour de lui. Quand nous utilisons la fonction de transformation ci-dessous, qui fait sortir le carré vert de sa position initiale, nous remarquons que le texte qui l'entoure reste fixe en place, comme si le carré était un élément block :

voir Transform explanation de css-tricks dans CodePen

Il convient également de noter que translate sera accéléré par le matériel quand vous animez cette propriété, contrairement à position: absolute.

Valeurs multiples

.element {
  width: 20px;
  height: 20px;
  transform: scale(20) skew(-20deg);
}

Il est important de noter qu'il y a un ordre dans lequel ces transformations seront effectuées, dans l'exemple ci-dessus skew sera effectué en premier et ensuite l'élément sera mis à l'échelle.

Matrix

La fonction de transformation matricielle peut être utilisée pour combiner toutes les transformations en une seule. C'est un peu comme un raccourci de transformation, sauf que je ne crois pas qu'il soit vraiment destiné à être écrit à la main. Il existe des outils comme the Matrix Resolutions, qui peuvent convertir un groupe de transformations en une seule déclaration matricielle. Peut-être que dans certaines situations, cela peut réduire la taille du fichier, bien que des micro-optimisations peu amicales pour les auteurs comme celle-ci ne valent probablement pas d'y passer trop de temps.

Pour les curieux, ceci :

rotate(45deg) translate(24px, 25px)

...peut aussi être représenté comme :

matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824)

3D Transform

La plupart des propriétés que nous avons passées en revue ont des versions 3D.

translate3d(x, y, z)
translateZ(z)

La troisième valeur de translate3d ou la valeur de translateZ rapprochent l'élément de l'observateur, les valeurs négatives l'en éloignent.

scale3d(sx, sy, sz)
scaleZ(sz)

La troisième valeur dans scale3d ou la valeur dans scaleZ affectent la mise à l'échelle le long de l'axe z (par exemple, la ligne imaginaire sortant directement de l'écran).

rotateX(value)
rotateY(value)
rotate3d(x, y, z)

rotateX et rotateY feront tourner un élément dans l'espace 3D autour de ces axes. rotate3d nous permet de spécifier un point dans l'espace 3D autour duquel faire tourner l'élément.

matrix3d(…)

Un moyen programmatique de décrire une transformation 3D dans une grille 4×4. Personne n'en écrira jamais une à la main, jamais.

perspective(value)

Cette valeur n'affecte pas l'élément lui-même, mais elle affecte les transformées 3D des éléments descendants, leur permettant d'avoir tous une perspective de profondeur cohérente.

Plus d'information

• La doc MDN sur transform et son utilisation.
• La documentation de David DeSandro sur 3D transforms
• Surfin’ Safari: 3D transforms
• La spec W3C sur CSS3 transforms
• Intro à CSS 3D transforms par David DeSandro
• Astuces pour utiliser CSS translateZ() et perspective() (DigitalOcean)