Offset-rotation - Astuces CSS | CSS Almanach 2025

Cette propriété a commencé sa vie comme motion-rotation, puis elle est devenue offset-rotation, maintenant elle l'est offset-rotate. C'est toujours une propriété expérimentale Working Draft donc ?‍♀️. Si vous comptez l'utiliser, vous pouvez aussi bien utiliser ce qui est le plus récent.

La offset-rotatepropriété en CSS contrôle l'angle d'un élément en fonction de son le offset-distancelong d'un offset-path.

Imaginez que l'élément animé le long d'un chemin soit une petite voiture de course. Au fur et à mesure que la voiture de course se déplace le long du chemin, elle doit vraiment tourner pour que l'avant de la voiture soit orienté dans la direction dans laquelle elle se déplace, sinon, elle aura l'air étrange et non naturelle. Heureusement, la valeur par défaut offset-pathest celle autoqui fait exactement cela.

Voir cette démo:

Voir la
voiture Pen scalextric sur motion-path par Chris Coyier (@chriscoyier)
sur CodePen.

Valeurs possibles

.mover ( offset-rotate: auto; /* default, faces forward */ offset-rotate: reverse; /* faces backward */ offset-rotate: 30deg; /* fixed angle */ offset-rotate: auto 30deg; /* combine auto behavior with a set rotation */ )

Prise en charge du navigateur

Les offset-*propriétés sont toujours considérées comme une caractéristique expérimentale au moment de la rédaction de cet article. Si le manque actuel de prise en charge du navigateur vous fait hésiter à l'utiliser sur un projet, vous pouvez envisager d'utiliser GSAP pour ce niveau d'animation. Cela vous offrira le support de navigateur le plus large pour le moment.

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.