Offset-rotácia - Triky CSS | Almanach CSS 2025

Táto vlastnosť začala život ako motion-rotation, potom sa stal offset-rotation, teraz je offset-rotate. Stále je to experimentálna vlastnosť Working Draft, takže ?‍♀️. Ak ho chcete používať, môžete použiť čokoľvek, čo je najnovšie.

offset-rotateVlastnosť CSS riadi uhol prvku v závislosti na jeho offset-distancepozdĺž offset-path.

Predstavte si, že prvok animovaný pozdĺž cesty je malé závodné auto. Keď sa závodné auto pohybuje po ceste, musí sa skutočne točiť tak, aby predná časť vozidla smerovala v smere, v ktorom sa pohybuje, inak bude vyzerať čudne a neprirodzene. Predvolená hodnota offset-pathje našťastie to, autočo robí presne to.

Zobraziť túto ukážku:

Prezrite si
šupináčové auto Pen na pohybovej dráhe od Chrisa Coyiera (@chriscoyier)
na CodePen.

Možné hodnoty

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

Podpora prehliadača

Tieto offset-*vlastnosti sú stále považované za experimentálne funkcie v čase písania tohto článku. Ak súčasná nedostatočná podpora prehľadávačov váha s jej použitím v projekte, možno budete chcieť zvážiť použitie GSAP pre túto úroveň animácie. Takto získate najširšiu podporu prehľadávača v súčasnosti.

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.