Faire pivoter un menu à partir d'un bouton, ou faire grossir une image depuis son coin inférieur plutôt que depuis son centre : ces effets, très courants sur les interfaces modernes, reposent sur une seule propriété, transform-origin. Sans elle, toute rotation ou tout agrandissement se ferait invariablement depuis le centre de l'élément, ce qui ne correspond pas toujours à l'effet recherché.
transform-origin accompagne toujours transform : elle ne produit aucun effet seule, elle se contente de déplacer le point autour duquel la transformation appliquée par transform va s'exécuter.
Définition
transform-origin définit le point fixe, exprimé en deux ou trois coordonnées, autour duquel une rotation, une mise à l'échelle (scale) ou une inclinaison (skew) se produit. Par défaut, ce point se situe exactement au centre de la boîte de l'élément, soit 50% 50%. Le déplacer revient à choisir un nouveau pivot : un coin, un bord, ou même un point situé en dehors de l'élément.
.icone-menu {
transform-origin: top left;
transform: rotate(90deg);
}Syntaxe et valeurs acceptées
La propriété accepte des mots-clés (top, bottom, left, right, center), des pourcentages, des unités de longueur comme px ou rem, ou une combinaison des deux premiers axes suivie d'une troisième valeur pour la profondeur en contexte 3D.
| Valeur | Position du pivot |
|---|---|
center (par défaut) | Centre exact de l'élément |
top left | Coin supérieur gauche |
bottom right | Coin inférieur droit |
0 0 | Coin supérieur gauche, en coordonnées |
Sur un élément dont la largeur diffère nettement de la hauteur, comme un bouton rectangulaire large, garder le point d'origine au centre par défaut suffit dans l'immense majorité des cas : le déplacer ne devient vraiment utile que pour des effets précis, où le mouvement doit sembler provenir d'un endroit particulier de l'interface.
Un cas d'usage concret : un menu qui se déploie depuis un bouton
Un menu déroulant qui apparaît sous un bouton donne une impression bien plus naturelle s'il grossit depuis ce bouton plutôt que depuis son propre centre. En plaçant le point d'origine en haut du menu, juste sous le bouton, la mise à l'échelle donne l'illusion que le menu jaillit littéralement du bouton qui l'a ouvert.
.menu {
transform-origin: top center;
transform: scale(0);
transition: transform 0.15s ease-out;
}
.menu.ouvert {
transform: scale(1);
}Le piège du centre par défaut
L'erreur la plus fréquente consiste à animer une rotation ou un agrandissement sans jamais toucher à transform-origin, puis à s'étonner que l'élément semble se déplacer tout seul pendant l'animation. Ce déplacement apparent vient simplement du fait que la transformation s'exécute depuis le centre, alors que l'effet recherché supposait un pivot différent, souvent un coin ou un bord précis.
transform-origin découle directement de cette question.transform-origin en trois dimensions
En contexte de Transformation 3D, transform-origin accepte une troisième valeur pour la profondeur, sur l'axe Z, ce qui permet de placer le pivot non plus seulement dans le plan de l'élément mais aussi devant ou derrière lui.
Questions fréquentes
transform-origin fonctionne-t-il sans la propriété transform ?Non, transform-origin ne fait que définir un point de référence : sans une transformation active via transform, comme une rotation ou une mise à l'échelle, il n'a strictement aucun effet visible sur la page.
Oui, transform-origin accepte n'importe quelle coordonnée, y compris des valeurs négatives ou supérieures à 100%, ce qui place le pivot en dehors des limites visuelles de l'élément, un réglage utile pour simuler un pendule ou une porte qui pivote sur un axe extérieur à sa propre boîte.
En pratique non, transform-origin n'a pas vocation à être animé directement : on la fixe une fois pour toutes avant de déclencher la transformation, puis c'est transform, combiné à transition ou à une Animation CSS, qui produit le mouvement animé autour de ce point fixe.