CSS offset-rotate Property

What You’ll Learn

The offset-rotate property controls how an element turns while it travels along a motion path. It is what makes arrows, icons, and vehicles point in the direction they move.

Introduction

The offset-rotate property in CSS is used to specify the rotation of an element along the motion path defined by the offset-path property.

This property allows you to control the orientation of an element as it moves along the path, enabling complex animations and dynamic visual effects.

It is particularly useful for animating elements along curved paths where maintaining a specific orientation is crucial.

Definition and Usage

Without offset-rotate, an element may slide around a circle or curve while staying upright. With offset-rotate: auto, the element turns to follow the path tangent.

Use a fixed angle when you want the element to keep the same rotation no matter how the path bends.

📝 Syntax

The syntax for the offset-rotate property is as follows:

element {
  offset-rotate: auto | reverse | <angle> [<angle>]?;
}

• auto — The element rotates along the path, aligning with the path direction.
• reverse — Similar to auto, but rotated 180 degrees relative to the path direction.
• <angle> — A fixed rotation such as 45deg, 0.5rad, or 100grad.

Basic Example

.box {
  offset-path: circle(80px at 120px 80px);
  offset-rotate: auto;
  animation: orbit 5s linear infinite;
}

Syntax Rules

• Define a path with offset-path before adjusting rotation.
• Use auto when the element should point along the route.
• Use a fixed angle when orientation should stay constant.
• An optional second angle can add extra rotation in advanced cases.

🎯 Default Value

The default value of the offset-rotate property is auto, which means the element’s rotation aligns automatically with the direction of the motion path.

That makes it a strong default for directional icons and shapes moving along curved routes.

💎 Property Values

Examples Gallery

Compare automatic path rotation with fixed angles and reversed direction.

<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: #2563eb;
    offset-path: path("M 100 0 A 100 100 0 1 1 100 -0.1");
    offset-rotate: auto;
    animation: move 5s infinite linear;
  }

  @keyframes move {
    to { offset-distance: 100%; }
  }
</style>

<div class="box"></div>

.marker {
  offset-path: path("M 10,80 Q 95,10 180,80 T 350,80");
  offset-rotate: 45deg;
  animation: follow 4s ease-in-out infinite alternate;
}

@keyframes follow {
  to { offset-distance: 100%; }
}

.car {
  offset-path: circle(70px at 140px 90px);
  offset-rotate: reverse;
  animation: orbit 4s linear infinite;
}

@keyframes orbit {
  to { offset-distance: 100%; }
}

.label {
  offset-path: path("M 10,70 L 250,70");
  offset-rotate: 0deg;
  animation: travel 3s linear infinite alternate;
}

@keyframes travel {
  to { offset-distance: 100%; }
}

Pair with offset-path and offset-distance

offset-rotate controls orientation only. You still need offset-path for the route and offset-distance to move along it.

.arrow {
  offset-path: circle(80px at 120px 80px);
  offset-distance: 0%;
  offset-rotate: auto;
  animation: orbit 4s linear infinite;
}

♿ Accessibility

• Respect reduced motion — Disable rotating path animations when prefers-reduced-motion: reduce is set.
• Keep motion decorative — Do not rely on rotation alone to communicate important state.
• Avoid disorienting spins — Fast rotating motion can be uncomfortable for some users.
• Provide static fallbacks — Ensure content remains readable if motion path features fail.

💡 Best Practices