Rotazione offset - Trucchi CSS

Questa proprietà è nata come motion-rotation, poi è diventata offset-rotation, ora è offset-rotate. È ancora una proprietà sperimentale di Working Draft quindi ?‍♀️. Se hai intenzione di usarlo, potresti anche usare qualunque sia la cosa più recente.

La offset-rotateproprietà in CSS controlla l'angolo di un elemento a seconda della sua offset-distancelunghezza a offset-path.

Immagina che l'elemento animato lungo un percorso sia una piccola macchina da corsa. Mentre l'auto da corsa si muove lungo il percorso, ha davvero bisogno di ruotare in modo che la parte anteriore dell'auto sia rivolta nella direzione in cui si sta muovendo, altrimenti sembrerà strana e innaturale. Per fortuna, il valore predefinito per offset-pathè autoche fa esattamente questo.

Guarda questa demo:

Guarda l'
auto Scalextric Pen su motion-path di Chris Coyier (@chriscoyier)
su CodePen.

Possibili valori

.mover ( offset-rotate: auto; /* default, faces forward */ offset-rotate: reverse; /* faces backward */ offset-rotate: 30deg; /* fixed angle */ offset-rotate: auto 30deg; /* combine auto behavior with a set rotation */ )

Supporto del browser

Le offset-*proprietà sono ancora considerate una caratteristica sperimentale al momento della stesura di questo documento. Se l'attuale mancanza di supporto del browser ti rende esitante a usarlo su un progetto, potresti prendere in considerazione l'utilizzo di GSAP per questo livello di animazione. Questo ti offrirà il più ampio supporto del browser al momento.

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.