transform en CSS : bouger, tourner et redimensionner sans recalculer la mise en page

Quand un bouton grossit légèrement au survol de la souris, ou qu'une carte pivote pour révéler son verso, c'est presque toujours la propriété transform qui est à l'œuvre. Elle permet de déplacer, faire pivoter, redimensionner ou incliner un élément directement dans le rendu du navigateur, sans jamais modifier sa place réelle dans le document.

Sa popularité tient à une raison précise : contrairement à des propriétés comme top ou margin-left, transform ne force pas le navigateur à recalculer la mise en page de toute la page à chaque image, ce qui la rend nettement plus fluide pour les animations. C'est la propriété que l'on retrouve derrière la quasi-totalité des animations d'interface modernes.

Définition

transform applique une ou plusieurs transformations géométriques (translation, rotation, mise à l'échelle, inclinaison) à la boîte d'un élément, sans changer sa taille dans le flux du document ni déplacer les éléments voisins. Chaque transformation se donne sous forme de fonction, et plusieurs fonctions peuvent se combiner dans une seule déclaration, séparées par un espace.

.carte {
  transform: translateX(20px) rotate(5deg) scale(1.05);
}

Les fonctions de transformation les plus courantes

Une poignée de fonctions couvre l'essentiel des besoins. translate() déplace un élément horizontalement et verticalement, rotate() le fait pivoter autour d'un point, scale() l'agrandit ou le réduit, et skew() l'incline selon un angle. Chacune existe aussi en version à un seul axe, comme translateX() ou scaleY(), pour ne toucher qu'une dimension à la fois.

Pourquoi transform ne perturbe pas la mise en page

Modifier top, left ou margin oblige le navigateur à recalculer la position de l'élément par rapport à tous ses voisins, une étape coûteuse appelée reflow, suivie d'un nouveau rendu visuel de la zone concernée. transform, lui, agit après ce calcul : le navigateur peut le confier à la carte graphique et se contenter de redessiner l'élément déplacé, sur un calque à part, sans toucher au reste de la page.

Un exemple concret : effet de survol

L'usage le plus courant de transform reste l'effet de survol sur un bouton ou une carte, combiné à une transition pour que le changement ne soit pas instantané mais progressif.

.bouton {
  transform: scale(1);
  transition: transform 0.2s ease-out;
}
.bouton:hover {
  transform: scale(1.05);
}

Au repos, le bouton garde sa taille normale. Au survol, il grossit légèrement, et la transition rend ce changement perceptible sur 0,2 seconde plutôt que d'un coup. C'est la combinaison de ces deux propriétés, jamais l'une sans l'autre, qui produit une interaction agréable. Notre formation HTML et CSS construit ce même effet de survol depuis zéro, pour comprendre pourquoi transform et transition fonctionnent toujours ensemble.

Le point de rotation et les transformations en trois dimensions

Une rotation ou une mise à l'échelle se produit toujours autour d'un point de référence, réglé par défaut au centre de l'élément mais ajustable grâce à transform-origin. transform prend également en charge la troisième dimension, avec des fonctions comme rotateX() ou translateZ(), détaillées dans la fiche consacrée à la Transformation 3D.

Bonnes pratiques et limites

transform ne s'applique pas de la même façon à tous les éléments : un élément en display: inline, comme un simple span dans un paragraphe, ignore la propriété tant qu'il reste inline. Il faut le passer en inline-block ou en block pour que la transformation prenne effet. Sur une animation complexe ou répétée, ajouter will-change en amont peut aider le navigateur à préparer l'optimisation, mais uniquement avec parcimonie.

Questions fréquentes

Oui, en les écrivant l'une après l'autre dans la même déclaration transform, séparées par un espace, comme transform: rotate(10deg) scale(1.1). En revanche, écrire deux déclarations transform séparées ne les cumule pas : la seconde écrase entièrement la première, il faut donc toujours les combiner dans une seule ligne.

Parce que le point de référence de la rotation, appelé point d'origine, se règle par défaut au centre de la boîte, mais peut être déplacé vers un coin ou un bord précis avec la propriété transform-origin. Sans cet ajustement, un élément plus large que haut donnera une impression de bascule inattendue.

Tout à fait, il n'a besoin d'aucune transition ni animation pour produire un effet : une simple déclaration transform: rotate(-3deg) suffit à donner une inclinaison permanente à une image ou une étiquette, comme un post-it légèrement de travers sur une page.