offset-rotate

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

/* 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: .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.

Syntaxe formelle

[ auto | reverse ] || <angle>

Exemples

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

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

Résultat

Spécifications

Spécification État Commentaires
Motion Path Module Level 1
La définition de 'offset-rotate' dans cette spécification.
Version de travail Définition initiale.
Valeur initialeauto
Applicabilitééléments transformables
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationcomme <angle>, <basic-shape> ou <path()>
Ordre canoniqueselon la grammaire

Note : Les versions antérieures de la spécification utilisait le nom motion-rotation pour cette propriété.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
offset-rotate
Expérimentale
Chrome Support complet 56
Support complet 56
Support complet 55
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : offset-rotation
Support complet 46
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : motion-rotation
Edge Aucun support NonFirefox Support complet 69
Désactivée
Support complet 69
Désactivée
Désactivée From version 69: this feature is behind the layout.css.motion-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 43
Support complet 43
Support complet 42
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : offset-rotation
Support complet 33
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : motion-rotation
Safari Aucun support NonWebView Android Support complet 56
Support complet 56
Support complet 55
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : offset-rotation
Support complet 46
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : motion-rotation
Chrome Android Support complet 56
Support complet 56
Support complet 55
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : offset-rotation
Support complet 46
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : motion-rotation
Firefox Android Aucun support NonOpera Android ? Safari iOS Aucun support NonSamsung Internet Android Support complet 6.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité utilise un nom non-standard.