Proprietà CSS offset-rotate
Usa la proprietà CSS offset-rotate per specificare l'angolo di un elemento lungo l'offset-path. Valori ed esempi pratici.
La proprietà CSS offset-rotate imposta l'orientamento (rotazione) di un elemento mentre si sposta lungo il suo percorso di movimento. Quando un elemento è posizionato con un offset-path e viene spostato con offset-distance, offset-rotate determina se l'elemento ruota automaticamente per seguire la direzione di marcia, punta nella direzione opposta, o mantiene un angolo fisso.
Questa è la proprietà da usare quando si vuole che una freccia, un'auto, un aereo o qualsiasi forma direzionale "segua la curva" invece di scorrere rigidamente. Per impostazione predefinita un elemento mantiene il suo orientamento originale indipendentemente da come il percorso si piega; offset-rotate: auto lo fa ruotare in modo che il suo bordo anteriore sia sempre rivolto nella direzione del percorso.
Nelle prime bozze della specifica questa proprietà si chiamava motion-rotation, poi offset-rotation, e infine offset-rotate. Nei vecchi articoli si possono ancora trovare i nomi precedenti, ma solo offset-rotate è quello attuale.
Riferimento rapido
| Valore iniziale | auto |
|---|---|
| Si applica a | Elementi trasformabili |
| Ereditato | No |
| Animabile | Sì |
| Valore calcolato | La parola chiave, un angolo, o entrambi |
| Versione | Motion Path Module Level 1 |
| Sintassi DOM | object.style.offsetRotate = "auto 90deg"; |
Sintassi
/* keywords */
offset-rotate: auto;
offset-rotate: reverse;
/* a fixed angle */
offset-rotate: 90deg;
offset-rotate: 0.5turn;
/* a keyword plus an angle offset */
offset-rotate: auto 45deg;
offset-rotate: reverse 90deg;auto— l'elemento ruota per corrispondere alla direzione del percorso nella sua posizione attuale (0deg significa "puntare lungo il percorso").reverse— comeauto, ma ruotato di ulteriori 180deg, così l'elemento è rivolto all'indietro lungo il percorso.<angle>— una rotazione fissa che ignora la direzione del percorso. L'elemento viene ruotato di questo angolo costante in senso orario.auto <angle>— combina entrambi: segue la direzione del percorso, poi aggiunge l'angolo sopra. Questa è la forma più utile quando la forma "punta" in una direzione non standard (ad esempio, una freccia disegnata verso l'alto ha bisogno diauto 90degper essere rivolta lungo un percorso verso destra).
Un errore comune: offset-rotate ha effetto solo quando l'elemento ha effettivamente un offset-path. Da solo non fa nulla — non c'è nessuna direzione del percorso con cui allinearsi.
Esempio: seguire la direzione del percorso
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #ccc;
}
.mover {
width: 70px;
height: 70px;
background: linear-gradient(#8ebf42 50%, #1c87c9 50%);
position: absolute;
left: 40%;
top: 100px;
offset-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z");
offset-rotate: reverse;
animation: move 4s linear infinite;
}
@keyframes move {
100% {
offset-distance: 100%;
}
}
</style>
<body>
<h2>Offset-rotate property example</h2>
<div class="mover"></div>
</body>
</html>Nell'esempio precedente, sostituisci offset-rotate: reverse; con offset-rotate: auto; per vedere la forma rivolta in avanti invece che all'indietro, oppure con un valore fisso come offset-rotate: 45deg; per mantenere un'inclinazione costante che ignora completamente la curva.
Esempio: angolo fisso vs. auto
Un <angle> fisso mantiene lo stesso orientamento lungo l'intero percorso, mentre auto e reverse si riorientano in ogni punto. Confronta i due quadrati qui sotto:
<!DOCTYPE html>
<html>
<head>
<title>offset-rotate: auto vs. fixed angle</title>
<style>
.track {
position: relative;
height: 160px;
}
.mover {
width: 40px;
height: 40px;
position: absolute;
offset-path: path("M20,80 Q120,0 220,80 T420,80");
animation: move 4s linear infinite;
}
/* turns to follow the curve */
.auto {
background: #1c87c9;
offset-rotate: auto;
}
/* always tilted 45deg, ignores the curve */
.fixed {
background: #8ebf42;
offset-rotate: 45deg;
}
@keyframes move {
100% {
offset-distance: 100%;
}
}
</style>
</head>
<body>
<h2>auto (blue) follows the curve; 45deg (green) stays fixed</h2>
<div class="track">
<div class="mover auto"></div>
<div class="mover fixed"></div>
</div>
</body>
</html>Supporto browser e accessibilità
Le proprietà del percorso di movimento sono supportate nelle versioni attuali di Chrome, Edge, Safari e Firefox. Poiché l'effetto è puramente un movimento decorativo, rispetta gli utenti che preferiscono il movimento ridotto racchiudendo le animazioni in una media query:
@media (prefers-reduced-motion: reduce) {
.mover {
animation: none;
}
}Per un controllo più preciso sul percorso stesso, consulta offset-path e offset-distance; la proprietà abbreviata offset permette di impostarle insieme a offset-rotate in un'unica dichiarazione. Se hai bisogno solo di una rotazione statica non correlata a un percorso, usa invece transform.
Valori
| Valore | Descrizione |
|---|---|
auto | L'elemento è ruotato per corrispondere alla direzione dell'offset path nella sua posizione attuale. |
reverse | L'elemento è ruotato per corrispondere alla direzione del percorso più 180 gradi (rivolto all'indietro). |
<angle> | Una rotazione oraria costante dell'angolo specificato, ignorando la direzione del percorso. |
auto <angle> | Segue la direzione del percorso e aggiunge l'angolo specificato sopra di essa. |
initial | Fa sì che la proprietà usi il suo valore predefinito (auto). |
inherit | Eredita la proprietà dal suo elemento padre (nessun effetto qui, poiché non è ereditata). |