offset-rotate

Baseline 2022
Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Expérimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété offset-rotate définit l'orientation et la direction de l'élément lorsqu'il est positionné le long du chemin représenté par offset-path.

Syntaxe

css
/* Suit la direction du chemin avec un éventuel */
/* décalage angulaire */
offset-rotate: auto;
offset-rotate: auto 45deg;

/* Suit la direction du chemin mais orienté dans la
/* direction opposée */
offset-rotate: reverse;

/* Conserve une rotation constante quelle que soit la position
/* sur le chemin  */
offset-rotate: 90deg;
offset-rotate: 0.5turn;
auto

L'élément est tourné avec l'angle donné par la direction du chemin offset-path, relativement à l'axe des abscisses. C'est la valeur par défaut.

<angle>

L'élément est tourné d'un angle fixe (indiqué dans le sens horaire).

auto <angle>

Si le mot-clé auto est suivi d'une valeur <angle>, l'élément est tourné de l'angle donné par rapport à la direction du chemin.

reverse

L'élément est tourné de façon similaire à auto, mais fait face à la direction opposée. Cette valeur est équivalente à auto 180deg.

Définition formelle

Valeur initialeauto
Applicabilitééléments transformables
Héritéenon
Valeur calculéecomme spécifié
Type d'animationcomme <angle>, <basic-shape> ou <path()>

Syntaxe formelle

offset-rotate = 
[ auto | reverse ] ||
<angle>

Exemples

CSS

css
div {
  width: 40px;
  height: 40px;
  background: #2bc4a2;
  margin: 20px;
  clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);
  animation: move 5000ms infinite alternate ease-in-out;

  offset-path: path("M20,20 C20,50 180,-10 180,20");
}
div:nth-child(1) {
  offset-rotate: auto;
}
div:nth-child(2) {
  offset-rotate: auto 90deg;
}
div:nth-child(3) {
  offset-rotate: 30deg;
}

@keyframes move {
  100% {
    offset-distance: 100%;
  }
}

HTML

html
<div></div>
<div></div>
<div></div>

Résultat

Spécifications

Specification
Motion Path Module Level 1
# offset-rotate-property

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
offset-rotate
auto
reverse

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Has more compatibility info.