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 initiale | auto |
---|---|
Applicabilité | éléments transformables |
Héritée | non |
Média | visuel |
Valeur calculée | comme spécifié |
Type d'animation | comme <angle>, <basic-shape> ou <path()> |
Ordre canonique | selon la grammaire |
Note : Les versions antérieures de la spécification utilisait le nom motion-rotation
pour cette propriété.
Compatibilité des navigateurs
Ordinateur | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
offset-rotate | Chrome
Support complet
56
| Edge Aucun support Non | Firefox
Support complet
69
| IE Aucun support Non | Opera
Support complet
43
| Safari Aucun support Non | WebView Android
Support complet
56
| Chrome Android
Support complet
56
| Firefox Android Aucun support Non | Opera Android ? | Safari iOS Aucun support Non | Samsung 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.