Offset-rotate - Triky CSS | Almanach CSS 2025

Tato vlastnost začala život jako motion-rotation, pak se stala offset-rotation, nyní je offset-rotate. Stále je to experimentální vlastnost Working Draft, takže ?‍♀️. Pokud ho budete používat, můžete také použít jakoukoli nejnovější věc.

offset-rotateVlastnost CSS řídí úhel prvku v závislosti na jeho offset-distancepodél offset-path.

Představte si, že prvek animovaný podél cesty je malé závodní auto. Vzhledem k tomu, že se závodní auto pohybuje po dráze, musí se skutečně otáčet tak, aby přední část vozu směřovala ve směru, ve kterém se pohybuje, jinak bude vypadat divně a nepřirozeně. Naštěstí výchozí hodnota pro offset-pathje autopřesně to, co dělá.

Podívejte se na toto demo:

Podívejte se na
auto Scalextric Pen na pohybové cestě 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 prohlížeče

Tyto offset-*vlastnosti jsou stále považovány za experimentální funkce v době psaní tohoto článku. Pokud vás současná absence podpory prohlížečů váhá s jejím použitím na projektu, možná budete chtít zvážit použití GSAP pro tuto úroveň animace. To vám v tuto chvíli nabídne nejširší podporu prohlížeče.

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.