offset-rotate

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.

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