Offset-rotera - CSS-tricks | CSS Almanack 2025

Denna egendom började livet som motion-rotation, sedan blev det offset-rotation, nu är det offset-rotate. Det är fortfarande en experimentell egenskap för Working Draft så ?‍♀️. Om du ska använda den kan du lika gärna använda vad det senaste är.

Den offset-rotateegenskap i CSS styr vinkeln för ett element beroende på dess offset-distancelängs en offset-path.

Tänk dig att elementet som animeras längs en stig är en liten racerbil. När racerbilen rör sig längs vägen måste den verkligen rotera så att bilens framsida är vänd i den riktning den rör sig, annars ser den konstig och onaturlig ut. Tack och lov, standardvärdet för offset-pathvill säga autosom inte just detta.

Se denna demo:

Se Pen
Scalextric bil på motion-path av Chris Coyier (@chriscoyier)
på CodePen.

Möjliga värden

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

Webbläsarstöd

De offset-*egenskaper anses fortfarande vara en experimentell funktion vid tidpunkten för denna skrift. Om den nuvarande bristen på webbläsarstöd gör dig tveksam till att använda den i ett projekt, kanske du vill överväga att använda GSAP för denna animeringsnivå. Detta ger dig det bredaste webbläsarstödet just nu.

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.