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
/* 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
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
Specification |
---|
Motion Path Module Level 1 # offset-rotate-property |
Compatibilité des navigateurs
BCD tables only load in the browser