{"id":243778,"date":"2016-07-22T14:42:07","date_gmt":"2016-07-22T21:42:07","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=243778"},"modified":"2019-05-29T20:00:22","modified_gmt":"2019-05-30T03:00:22","slug":"offset-rotate","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/o\/offset-rotate\/","title":{"rendered":"offset-rotate"},"content":{"rendered":"

This property began life as motion-rotation<\/code>, then it became offset-rotation<\/code>, now it’s offset-rotate<\/code>. 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.<\/p>\n

The offset-rotate<\/code> property in CSS controls the angle of an element depending on its offset-distance<\/code><\/a> along a offset-path<\/code><\/a>.<\/p>\n

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<\/code> is auto<\/code> which does exactly that. <\/p>\n

See this demo:<\/p>\n

\n See the Pen
\n scalextric car on motion-path<\/a> by Chris Coyier (@chriscoyier<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\n

Possible Values<\/h3>\n
.mover {\r\n  offset-rotate: auto; \/* default, faces forward *\/\r\n  offset-rotate: reverse; \/* faces backward *\/\r\n  offset-rotate: 30deg; \/* fixed angle *\/\r\n  offset-rotate: auto 30deg; \/* combine auto behavior with a set rotation *\/\r\n}<\/code><\/pre>\n
Browser support<\/h3>\n
The offset-*<\/code> 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<\/a> for this level of animation. This will offer you the widest browser support at the moment.<\/p>\n
This browser support data is from Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div>
Desktop<\/h4>
Chrome<\/span><\/th>Firefox<\/span><\/th>IE<\/span><\/th>Edge<\/span><\/th>Safari<\/span><\/th><\/tr><\/thead>
46<\/span><\/td>72<\/span><\/td>No<\/span><\/td>79<\/span><\/td>16.0<\/span><\/td><\/tr><\/table><\/div>
Mobile \/ Tablet<\/h4>
Android Chrome<\/span><\/th>Android Firefox<\/span><\/th>Android<\/span><\/th>iOS Safari<\/span><\/th><\/tr><\/thead>
124<\/span><\/td>125<\/span><\/td>124<\/span><\/td>16.0<\/span><\/td><\/tr><\/table><\/div><\/div>\n
As of Chrome 46 and Opera 33 (and the related mobile versions), we have “initial support” in Blink (no flag). <\/p>\n
Related Properties<\/h3>\n