Propriété CSS offset-rotate
Utilisez la propriété CSS offset-rotate pour définir l'angle d'un élément le long de l'offset-path. Découvrez les valeurs et exemples.
La propriété CSS offset-rotate définit l'orientation (rotation) d'un élément lorsqu'il se déplace le long de son chemin de mouvement. Lorsqu'un élément est positionné avec un offset-path et déplacé via offset-distance, offset-rotate détermine si l'élément pivote automatiquement pour faire face à la direction de déplacement, pointe dans le sens opposé ou conserve un angle fixe.
C'est la propriété à utiliser lorsque vous souhaitez qu'une flèche, une voiture, un avion ou toute forme directionnelle « suive la courbe » au lieu de glisser rigidement. Par défaut, un élément conserve son orientation d'origine quelle que soit la courbure du chemin ; offset-rotate: auto lui fait pivoter de sorte que son bord avant soit toujours orienté dans le sens du chemin.
Dans les premières ébauches de la spécification, cette propriété s'appelait motion-rotation, puis offset-rotation, et enfin offset-rotate. Vous pouvez encore rencontrer ces anciens noms dans des articles anciens, mais seul offset-rotate est actuellement valide.
Référence rapide
| Valeur initiale | auto |
|---|---|
| S'applique à | Éléments transformables |
| Hérité | Non |
| Animable | Oui |
| Valeur calculée | Le mot-clé, un angle, ou les deux |
| Version | Motion Path Module Level 1 |
| Syntaxe DOM | object.style.offsetRotate = "auto 90deg"; |
Syntaxe
/* keywords */
offset-rotate: auto;
offset-rotate: reverse;
/* a fixed angle */
offset-rotate: 90deg;
offset-rotate: 0.5turn;
/* a keyword plus an angle offset */
offset-rotate: auto 45deg;
offset-rotate: reverse 90deg;auto— l'élément pivote pour correspondre à la direction du chemin à sa position actuelle (0deg signifie « pointer dans le sens du chemin »).reverse— commeauto, mais avec une rotation supplémentaire de 180deg, de sorte que l'élément fait face vers l'arrière du chemin.<angle>— une rotation fixe qui ignore la direction du chemin. L'élément est tourné d'un angle constant dans le sens horaire.auto <angle>— combine les deux : suit la direction du chemin, puis ajoute l'angle en plus. C'est la forme la plus utile lorsque votre forme « pointe » dans une direction non standard (par exemple, une flèche dessinée vers le haut nécessiteauto 90degpour faire face à un chemin vers la droite).
Un écueil fréquent : offset-rotate n'a d'effet que lorsque l'élément possède un offset-path. Seul, il ne fait rien — il n'y a pas de direction de chemin à laquelle s'aligner.
Exemple : suivre la direction du chemin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #ccc;
}
.mover {
width: 70px;
height: 70px;
background: linear-gradient(#8ebf42 50%, #1c87c9 50%);
position: absolute;
left: 40%;
top: 100px;
offset-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z");
offset-rotate: reverse;
animation: move 4s linear infinite;
}
@keyframes move {
100% {
offset-distance: 100%;
}
}
</style>
<body>
<h2>Offset-rotate property example</h2>
<div class="mover"></div>
</body>
</html>Dans l'exemple ci-dessus, remplacez offset-rotate: reverse; par offset-rotate: auto; pour que la forme soit orientée vers l'avant au lieu de l'arrière, ou par une valeur fixe comme offset-rotate: 45deg; pour conserver une inclinaison constante qui ignore totalement la courbe.
Exemple : angle fixe vs auto
Un <angle> fixe maintient la même orientation tout au long du chemin, tandis que auto et reverse réorientent l'élément à chaque point. Comparez les deux carrés ci-dessous :
<!DOCTYPE html>
<html>
<head>
<title>offset-rotate: auto vs. fixed angle</title>
<style>
.track {
position: relative;
height: 160px;
}
.mover {
width: 40px;
height: 40px;
position: absolute;
offset-path: path("M20,80 Q120,0 220,80 T420,80");
animation: move 4s linear infinite;
}
/* turns to follow the curve */
.auto {
background: #1c87c9;
offset-rotate: auto;
}
/* always tilted 45deg, ignores the curve */
.fixed {
background: #8ebf42;
offset-rotate: 45deg;
}
@keyframes move {
100% {
offset-distance: 100%;
}
}
</style>
</head>
<body>
<h2>auto (blue) follows the curve; 45deg (green) stays fixed</h2>
<div class="track">
<div class="mover auto"></div>
<div class="mover fixed"></div>
</div>
</body>
</html>Compatibilité des navigateurs et accessibilité
Les propriétés de chemin de mouvement sont prises en charge dans les versions actuelles de Chrome, Edge, Safari et Firefox. Comme cet effet est purement décoratif, respectez les utilisateurs qui préfèrent les mouvements réduits en encapsulant les animations dans une media query :
@media (prefers-reduced-motion: reduce) {
.mover {
animation: none;
}
}Pour un contrôle plus précis du chemin lui-même, consultez offset-path et offset-distance ; la propriété raccourcie offset vous permet de les définir ensemble avec offset-rotate en une seule déclaration. Si vous avez seulement besoin d'une rotation statique sans rapport avec un chemin, utilisez plutôt transform.
Valeurs
| Valeur | Description |
|---|---|
auto | L'élément est tourné pour correspondre à la direction du chemin de décalage à sa position actuelle. |
reverse | L'élément est tourné pour correspondre à la direction du chemin plus 180 degrés (en regardant vers l'arrière). |
<angle> | Une rotation constante dans le sens horaire selon l'angle donné, ignorant la direction du chemin. |
auto <angle> | Suit la direction du chemin et y ajoute l'angle donné en supplément. |
initial | Fait utiliser à la propriété sa valeur par défaut (auto). |
inherit | Hérite la propriété de son élément parent (sans effet ici, car elle n'est pas héritée). |