offset-rotate

Avatar of Chris Coyier
Chris Coyier on (Updated on )

This property began life as motion-rotation, then it became offset-rotation, now it’s offset-rotate. It’s still a Working Draft experimental property so 🤷‍♀️. If you’re going to use it, you might as well use whatever the most recent thing is.

The offset-rotate property in CSS controls the angle of an element depending on its offset-distance along a offset-path.

Imagine the element being animated along a path is a little race car. As the race car moves along the path, it really needs to rotate so that the front of the car is facing in the direction it’s moving, otherwise, it will look weird and unnatural. Thankfully, the default value for offset-path is auto which does exactly that.

See this demo:

See the Pen
scalextric car on motion-path
by Chris Coyier (@chriscoyier)
on CodePen.

Possible Values

.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 support

The offset-* properties are still considered an experimental feature at the time of this writing. If the current lack of browser support makes you hesitant to use it on a project, then you might want to consider using GSAP for this level of animation. This will offer you the widest browser support at the moment.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeFirefoxIEEdgeSafari
4672No7916.0

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
12312412316.0

As of Chrome 46 and Opera 33 (and the related mobile versions), we have “initial support” in Blink (no flag).

Related Properties

Additional Information