CSS offset-rotate property

The offset-rotate CSS property sets the orientation (rotation) of an element as it travels along its motion path. When an element is positioned with an offset-path and moved with offset-distance, offset-rotate decides whether the element automatically turns to face the direction of travel, points the opposite way, or keeps a fixed angle.

This is the property you reach for when you want an arrow, car, plane, or any directional shape to "follow the curve" instead of sliding along stiffly. By default an element keeps its original orientation no matter how the path bends; offset-rotate: auto makes it pivot so its forward edge always faces along the path.

In early drafts of the specification this property was named motion-rotation, then offset-rotation, and finally offset-rotate. You may still see the older names in legacy articles, but only offset-rotate is current.

Quick reference

Initial Value	`auto`
Applies to	Transformable elements
Inherited	No
Animatable	Yes
Computed value	The keyword, an angle, or both
Version	Motion Path Module Level 1
DOM Syntax	`object.style.offsetRotate = "auto 90deg";`

Syntax

/* keywords */
offset-rotate: auto;
offset-rotate: reverse;

/* a fixed angle */
offset-rotate: 90deg;
offset-rotate: 0.5turn;

/* a keyword plus an angle offset */
offset-rotate: auto 45deg;
offset-rotate: reverse 90deg;

auto — the element rotates to match the direction of the path at its current position (0deg means "pointing along the path").
reverse — like auto, but rotated an extra 180deg, so the element faces backward along the path.
<angle> — a fixed rotation that ignores the path's direction. The element is rotated by this constant clockwise angle.
auto <angle> — combines both: follow the path's direction, then add the angle on top. This is the most useful form when your shape "points" in a non-standard direction (for example, an arrow drawn pointing up needs auto 90deg to face along a rightward path).

A common gotcha: offset-rotate only takes effect when the element actually has an offset-path. On its own it does nothing — there is no path direction to align with.

Example: following the path direction

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #ccc;
      }
      .mover {
        width: 70px;
        height: 70px;
        background: linear-gradient(#8ebf42 50%, #1c87c9 50%);
        position: absolute;
        left: 40%;
        top: 100px;
        offset-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z");
        offset-rotate: reverse;
        animation: move 4s linear infinite;
      }
      @keyframes move {
        100% {
          offset-distance: 100%;
        }
      }
    </style>
    <body>
      <h2>Offset-rotate property example</h2>
      <div class="mover"></div>
    </body>
</html>

Try it Yourself »

In the example above, swap offset-rotate: reverse; for offset-rotate: auto; to see the shape face forward instead of backward, or for a fixed value like offset-rotate: 45deg; to keep a constant tilt that ignores the curve entirely.

Example: a fixed angle vs. auto

A fixed <angle> keeps the same orientation along the whole path, while auto and reverse re-orient at every point. Compare the two squares below:

<!DOCTYPE html>
<html>
  <head>
    <title>offset-rotate: auto vs. fixed angle</title>
    <style>
      .track {
        position: relative;
        height: 160px;
      }
      .mover {
        width: 40px;
        height: 40px;
        position: absolute;
        offset-path: path("M20,80 Q120,0 220,80 T420,80");
        animation: move 4s linear infinite;
      }
      /* turns to follow the curve */
      .auto {
        background: #1c87c9;
        offset-rotate: auto;
      }
      /* always tilted 45deg, ignores the curve */
      .fixed {
        background: #8ebf42;
        offset-rotate: 45deg;
      }
      @keyframes move {
        100% {
          offset-distance: 100%;
        }
      }
    </style>
  </head>
  <body>
    <h2>auto (blue) follows the curve; 45deg (green) stays fixed</h2>
    <div class="track">
      <div class="mover auto"></div>
      <div class="mover fixed"></div>
    </div>
  </body>
</html>

Browser support and accessibility

Motion-path properties are supported in current versions of Chrome, Edge, Safari, and Firefox. Because the effect is purely decorative motion, respect users who prefer reduced motion by wrapping animations in a media query:

@media (prefers-reduced-motion: reduce) {
  .mover {
    animation: none;
  }
}

For finer control over the path itself, see offset-path and offset-distance; the shorthand offset lets you set them together with offset-rotate in one declaration. If you only need a static rotation unrelated to a path, use transform instead.

Values

Value	Description
`auto`	The element is rotated to match the direction of the offset path at its current position.
`reverse`	The element is rotated to match the path direction plus 180 degrees (facing backward).
`<angle>`	A constant clockwise rotation by the given angle, ignoring the path direction.
`auto <angle>`	Follows the path direction and adds the given angle on top of it.
`initial`	Makes the property use its default value (`auto`).
`inherit`	Inherits the property from its parent element (no effect here, since it is not inherited).

Practice

What can be achieved using the offset-rotate CSS property?

It controls the orientation of the element.It sets the color of the element.It positions the element relative to its normal position.It creates 3D transforms for an element.It sets the rotation point relative to the position property.