🧭 CSS offset-rotate — Complete Tutorial

The CSS offset-rotate property controls the rotation of an element as it moves along anoffset-path. It determines whether the element should rotate to face the direction of the path or stay in a fixed orientation.

>>“offset-rotate makes animations feel alive — objects turn naturally as they move along a path.”

Note

✔ Works only when offset-path is used
✔ Can automatically rotate along the path
✔ Supports angles (deg, rad, turn)
✔ Works in all modern browsers

📦 Syntax

offset-rotate syntax

offset-rotate: auto | reverse | <angle>;

/* Examples */
offset-rotate: auto;         /* align to path direction */
offset-rotate: reverse;      /* align but flipped 180deg */
offset-rotate: 45deg;        /* fixed angle */
offset-rotate: auto 30deg;   /* auto + angle offset */
ValueMeaning
autoRotates element to match path direction
reverseMatches direction but flipped 180°
<angle>Fixed rotation
auto <angle>Auto rotation + angle offset

🎨 1. Basic Example (Auto Rotation)

auto rotation

.car {
  offset-path: path("M0,0 L200,60 L250,150");
  offset-rotate: auto;
  animation: drive 4s linear infinite;
}

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

The car automatically points in the direction of the path.

🎨 2. Reverse Orientation

reverse

.arrow {
  offset-path: path("M0,0 L200,100");
  offset-rotate: reverse;
  animation: move 2s linear infinite;
}

The element follows the path but faces backward.

🎨 3. Fixed Rotation Angle (No Auto Rotation)

fixed angle

.rocket {
  offset-path: path("M0,0 C80,0 160,100 240,80");
  offset-rotate: 45deg;
  animation: fly 3s ease-in-out infinite;
}

The rocket moves along the path but always stays rotated at 45°.

🎨 4. Auto Rotation + Angle Offset

auto angle offset

.plane {
  offset-path: path("M0,0 C150,0 200,100 300,60");
  offset-rotate: auto 20deg;
  animation: fly 4s linear infinite;
}

The plane rotates with the path but is tilted by an extra 20°.

🎨 5. Combine offset-rotate + offset-distance

combine

.ball {
  offset-path: path("M0,50 C100,0 180,100 250,50");
  offset-rotate: auto;
  animation: move 3s ease-in-out infinite;
}

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

Both position and rotation follow the path naturally.

🎨 6. Circular Motion with Rotation

circular path

.planet {
  offset-path: path("M100,50 A50,50 0 1 1 99,50");
  offset-rotate: auto;
  animation: orbit 5s linear infinite;
}

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

Perfect for orbit animations or spinning loaders.

📌 Auto vs Reverse vs Fixed Angle

ModeRotation Behavior
autoFaces direction of the path
reverseFaces opposite direction
angleAlways rotated by a fixed degree
auto angleAuto rotation with additional offset

🧪 Real-World Use Cases

1️⃣ Car Driving Along a Road

car animation

.car {
  offset-path: path("M0,100 C100,50 200,150 300,80");
  offset-rotate: auto;
  animation: drive 3s linear infinite;
}

2️⃣ Airplane Banking While Turning

airplane

.plane {
  offset-path: path("M0,0 C150,-40 200,100 300,60");
  offset-rotate: auto 15deg;
}

3️⃣ Falling Leaves Animation

leaf

.leaf {
  offset-path: path("M0,0 C50,100 100,-50 150,100");
  offset-rotate: auto;
  animation: fall 5s ease-in-out infinite;
}

⚠️ Common Mistakes

  • ❌ Using offset-rotate without offset-path
  • ❌ Expecting automatic rotation with a fixed angle
  • ❌ Using invalid SVG path syntax inside path()
  • ❌ Forgetting to animate offset-distance for movement

Note

offset-rotate only controls rotation —offset-distance controls movement.

🔥 Summary

offset-rotate brings life to motion-path animations by allowing elements to dynamically rotate along the direction of a path. Combined with offset-path and offset-distance, it unlocks smooth and realistic movement.

  • auto → follow path direction
  • reverse → follow backwards
  • angle → fixed rotation
  • auto angle → auto + offset rotation
>>“offset-rotate turns simple movement into expressive, natural animation.”