Offset-rotate - CSS-Tricks | Almanah CSS 2025

Această proprietate a început viața așa cum motion-rotation, apoi a devenit offset-rotation, acum este offset-rotate. Este încă o proprietate experimentală de proiect de lucru, așa că ?‍♀️. Dacă aveți de gând să-l utilizați, ați putea folosi la fel de bine ceea ce este cel mai recent lucru.

offset-rotateProprietatea în CSS controlează unghiul unui element în funcție de de -a offset-distancelungul unei offset-path.

Imaginați-vă că elementul animat de-a lungul unei căi este o mașină de curse. Pe măsură ce mașina de curse se deplasează de-a lungul cărării, trebuie să se rotească într-adevăr, astfel încât partea din față a mașinii să fie orientată în direcția în care se mișcă, în caz contrar, va arăta ciudat și nefiresc. Din fericire, valoarea implicită pentru offset-patheste autocare face exact acest lucru.

Vedeți această demonstrație:

Vedeți
mașina Scalextric Pen pe mișcare-cale de Chris Coyier (@chriscoyier)
pe CodePen.

Valori posibile

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

Suport pentru browser

Cele offset-*Proprietățile sunt considerate în continuare o funcție experimentală , la momentul scrierii. Dacă lipsa actuală de suport pentru browser vă face să ezitați să îl utilizați într-un proiect, atunci vă recomandăm să utilizați GSAP pentru acest nivel de animație. Acest lucru vă va oferi cel mai larg suport de browser în acest moment.

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.