offset-rotation

This property began life as motion-rotation. This, and all other related motion-* properties, are being renamed offset-* in the spec. We're changing the names here in the almanac. If you want to use it right now, probably best to use both syntaxes.

The offset-rotation 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 Kseso (@Kseso) on CodePen.

Possible Values

.mover {
  offset-rotation: auto; /* default, faces forward */
  offset-rotation: reverse; /* faces backward */
  offset-rotation: 30deg; /* fixed angle */
  offset-rotation: 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

ChromeOperaFirefoxIEEdgeSafari
4633NoNoNoNo

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
No37No5657No

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

Related Properties

Additional Information

This comment thread is closed. If you have important information to share, please contact us.
icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag