La propriété transform vous permet de déplacer, mettre à l'échelle, faire pivoter et incliner un élément visuellement — sans affecter la mise en page du document (les autres éléments ne se déplacent pas). C'est accéléré par GPU, ce qui la rend idéale pour l'animation.
{ : (, ); }
{ : (); }
{ : (); }
{ : (); }
.box {
transform: translateX(100px) rotate(45deg) scale(1.2);
/* applied right-to-left: scale, then rotate, then translate */
}
Plusieurs fonctions sont appliquées en séquence ; modifier l'ordre change le résultat (faire pivoter puis translater diffère de translater puis faire pivoter).
.icon:hover { transform: scale(1.2); } /* grows on hover but neighbors DON'T move */
Contrairement à la modification de width/margin, une transformation affecte uniquement l'apparence rendue de l'élément, pas sa boîte dans le flux — les éléments environnants restent en place et il n'y a pas de recalcul. C'est exactement pourquoi les transformations sont fluides.
/* center an absolutely-positioned element */
.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* hover lift */
.card:hover { transform: translateY(-4px); }
/* 3D and perspective */
.card { transform: perspective(500px) rotateY(15deg); }
L'astuce de centrage translate(-50%, -50%) est omniprésente — elle décale l'élément en arrière de la moitié de sa propre taille.
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
Parce que les transformations ignorent la mise en page et le rendu (juste la composition), les animer maintient 60 fps — bien moins coûteux que d'animer position/taille.
Les transformations sont l'outil de base de l'animation CSS et des micro-interactions (survol soulevé, modales, carrousels, spinners de chargement).
Elles déplacent/mettent à l'échelle/font pivoter sans déclencher de mise en page, elles sont donc à la fois puissantes et performantes — la méthode recommandée pour animer le mouvement sur le web.