Offset-roteren - CSS-trucs | CSS Almanac 2025

Dit eigendom begon te leven zoals motion-rotationhet werd offset-rotation, nu is het offset-rotate. Het is nog steeds een experimentele eigenschap van Working Draft, dus ?‍♀️. Als je het gaat gebruiken, kun je net zo goed het meest recente gebruiken.

De offset-rotateeigenschap in CSS bepaalt de hoek van een element afhankelijk van zijn offset-distancelangs een offset-path.

Stel je voor dat het element dat langs een pad wordt geanimeerd een kleine raceauto is. Terwijl de raceauto over het pad beweegt, moet hij echt draaien zodat de voorkant van de auto in de richting wijst waarin hij beweegt, anders ziet hij er raar en onnatuurlijk uit. Gelukkig, de standaardwaarde voor offset-pathwil autodie precies dat doet.

Bekijk deze demo:

Zie de Pen
scalextric-auto op bewegingspad door Chris Coyier (@chriscoyier)
op CodePen.

Mogelijke waarden

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

Browser-ondersteuning

De offset-*eigenschappen worden op het moment van schrijven nog steeds als een experimenteel kenmerk beschouwd. Als het huidige gebrek aan browserondersteuning u aarzelt om het in een project te gebruiken, dan kunt u overwegen om GSAP te gebruiken voor dit animatieniveau. Dit biedt u momenteel de breedste browserondersteuning.

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.