Eltolás-forgatás - CSS-trükkök

Ez a tulajdonság úgy kezdte az életét, mint motion-rotationakkor offset-rotation, most lett offset-rotate. Ez még mindig egy Working Draft kísérleti tulajdonság, így ?‍♀️. Ha használni fogja, akkor akármi is a legfrissebb dolog.

A offset-rotateCSS-ben lévő tulajdonság vezérli az elem szöget attól függően, hogy offset-distancemilyen a offset-path.

Képzelje el, hogy egy ösvényen animált elem egy kis versenyautó. Amint a versenyautó halad az ösvényen, valóban úgy kell forognia, hogy az autó eleje a mozgás irányába nézzen, különben furcsának és természetellenesnek tűnik. Szerencsére az alapértelmezett érték offset-pathjelentése auto, amely pontosan ezt teszi.

Tekintse meg ezt a bemutatót:

Lásd a Pen
Scalextric autót a mozgópályán, Chris Coyier (@chriscoyier)
a CodePen-en.

Lehetséges értékek

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

Böngésző támogatás

A offset-*tulajdonságok az írás idején még mindig kísérleti tulajdonságnak számítanak. Ha a böngésző támogatásának jelenlegi hiánya miatt nem hajlandó használni a projektben, akkor érdemes megfontolni a GSAP használatát az animáció ilyen szintjén. Ez a legszélesebb böngészőtámogatást kínálja Önnek.

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.

Asztal

Króm	Firefox	AZAZ	Él	Szafari
46	72	Nem	79	Nem

Mobil / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81.	Nem

A Chrome 46 és az Opera 33 (és a kapcsolódó mobil verziók) verziójától kezdve a „kezdeti támogatással” rendelkezünk a Blink szolgáltatásban (nincs jelző).