Offset-rotate - CSS-triki | Almanah CSS 2025

Ta lastnost je začela življenje kot motion-rotation, potem je postala offset-rotation, zdaj je offset-rotate. Še vedno je eksperimentalna lastnost delovnega osnutka, zato ?‍♀️. Če jo boste uporabili, lahko uporabite tudi tisto, kar je najnovejše.

offset-rotateHotel v CSS krmili kot elementa glede na njeno offset-distancevzdolž offset-path.

Predstavljajte si, da je element, ki je animiran na poti, majhen dirkalnik. Ko se dirkalnik premika po poti, se mora zares zavrteti tako, da je sprednji del avtomobila obrnjen v smer, v katero se premika, sicer bo videti čudno in nenaravno. Na srečo je privzeta vrednost za offset-path, autoki počne točno to.

Oglejte si to predstavitev:

Oglejte si
avtomobil Pen scalextric na poti gibanja Chrisa Coyierja (@chriscoyier)
na CodePenu.

Možne vrednote

.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 brskalnika

V offset-*času pisanja te lastnosti še vedno veljajo za eksperimentalno značilnost. Če vas trenutno pomanjkanje podpore brskalnika omahuje pri uporabi, lahko razmislite o uporabi GSAP za to raven animacije. To vam bo ponudilo trenutno najširšo podporo za brskalnike.

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.