offset-rotate

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 initiale	`auto`
Applicabilité	éléments transformables
Héritée	non
Valeur calculée	comme spécifié
Type d'animation	comme <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

BCD tables only load in the browser