1. css
  2. /properties
  3. /offset-rotate



The offset-rotate property determines an element's rotation in relation to its offset-path. This rotation can either align with the path direction, stay at a fixed angle, face the opposite direction of the path or a combination of these.

Examples and Usage

To gain a better understanding of the offset-rotate property, we'll create a dynamic CSS animation using arrow-shaped elements following a custom path. These arrows will rotate differently based on the specified offset-rotate value.

HTML Structure

<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>

CSS Styling

.arrow {
  /* Arrow size and shape definition */
  width: 60px;
  height: 60px;
  clip-path: polygon(0% 0%, 5% 0%, 100% 50%, 5% 100%, 0% 100%, 20% 50%);
  background: #cd3333;
  margin: 50px;

  /* Animation and path definition */
  animation: move 4000ms infinite alternate ease-in-out;
  offset-path: path("M20,20 C30,70 170,10 170,20");

.arrow:nth-child(1) {
  /* The first arrow rotates to follow the path direction */
  offset-rotate: auto;

.arrow:nth-child(2) {
  /* The second arrow rotates to follow the path direction and adds an additional 90-degree rotation */
  offset-rotate: auto 90deg;

.arrow:nth-child(3) {
  /* The third arrow remains at a constant rotation of 45 degrees */
  offset-rotate: 45deg;

@keyframes move {
  100% {
    /* Movement of the arrow along the entire length of the path */
    offset-distance: 100%;

In this setup, three arrows traverse a custom path defined by offset-path. The offset-rotate property determines the rotation behavior of each arrow:

  • The first arrow (.arrow:nth-child(1)) utilizes offset-rotate: auto, causing it to rotate in the direction of the path.

  • The second arrow (.arrow:nth-child(2)) employs offset-rotate: auto 90deg, rotating according to the path's direction with an additional 90-degree rotation.

  • The third arrow (.arrow:nth-child(3)) uses offset-rotate: 45deg, maintaining a fixed rotation of 45 degrees relative to the positive x-axis throughout the animation, irrespective of the path's direction.

Moreover, the animation's progress along the path is regulated by the offset-distance property. The move keyframes animate the offset-distance property, moving the arrows from the beginning to the end of the path.


autoThe default value. The element's rotation aligns with the direction of offset-path in regards to the positive x-axis.
<angle>A constant clockwise rotation is applied to the element by the defined rotation angle.
auto <angle>When auto is followed by an <angle>, the angle's computed value is added to the computed value of auto, combining path alignment and constant rotation.
reverseThe element rotates identically to auto, but in the opposite direction. This is equivalent to auto 180deg.

Associated Properties

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

Tips and Tricks

  • Historically, this property was known as motion-rotation in earlier versions of the specification. This could be helpful to know when reading older tutorials.

  • Using offset-rotate alone won't produce any noticeable result as it requires a path to dictate the element's movement.

  • A combination of auto and <angle> in offset-rotate can generate compelling effects. This hybrid approach combines path-following rotation with a constant additional rotation, creating unique animation dynamics. For instance, an element could maintain its rotational identity (e.g., always tilted at a 45-degree angle) while still aligning with the path direction.

  • The reverse value can be handy when you want an element to move along a path but face the opposite direction of travel.

  • Remember, animations with offset-rotate and offset-path can potentially enhance user interfaces when applied judiciously. Too much movement, however, may distract and confuse users. Strike a balance for the best user experience.

Browser Compatibility

For a detailed breakdown of partial support nuances for older browser versions, refer to the first link in the Useful Resources below.

BrowserChromeEdgeSafariFirefoxOperaInternet Explorer

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

Useful Resources

Can I use: offset-rotate

W3C's Editor's Draft of Motion Path Module Level 1: offset-rotate