Offset-Rotation - CSS-Tricks | CSS-Almanach 2025

Diese Eigenschaft begann das Leben als motion-rotation, dann wurde es offset-rotation, jetzt ist es offset-rotate. Es ist immer noch eine experimentelle Eigenschaft des Working Draft, also ?‍♀️. Wenn Sie es verwenden möchten, können Sie auch das Neueste verwenden.

Die offset-rotateEigenschaft in CSS steuert den Winkel eines Elements in Abhängigkeit von seiner offset-distanceLänge entlang a offset-path.

Stellen Sie sich vor, das Element, das entlang eines Pfades animiert wird, ist ein kleines Rennauto. Wenn sich der Rennwagen auf dem Weg bewegt, muss er sich wirklich drehen, damit die Vorderseite des Autos in die Richtung zeigt, in die er sich bewegt. Andernfalls sieht er seltsam und unnatürlich aus. Zum Glück ist der Standardwert für offset-pathheißt , autodie genau das tut.

Sehen Sie diese Demo:

Sehen Sie das Pen
scalextric Auto auf Bewegungspfad von Chris Coyier (@chriscoyier)
auf CodePen.

Mögliche Werte

.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-Unterstützung

Die offset-*Eigenschaften werden zum Zeitpunkt dieses Schreibens noch als experimentelles Merkmal angesehen. Wenn Sie aufgrund der derzeitigen mangelnden Browserunterstützung zögern, diese für ein Projekt zu verwenden, sollten Sie GSAP für diese Animationsstufe verwenden. Dies bietet Ihnen derzeit die umfassendste Browserunterstützung.

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.