offset-rotate

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.

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

Related Properties

• offset-path
• offset-distance
• offset-position
• offset-anchor

Additional Information

• Spec: Motion Path Module Level 1 Spec
• Collection of Examples on CodePen
• Future Use: CSS Motion Paths by Dan Wilson
• WebKit Ticket #139128
• Mozilla Ticket #1186329
• Microsoft Edge feature request
• Chrome Platform Status: CSS Motion Path and sample
• MDN: offset (links to the other related properties)