CSS offset-rotate Property

Beginner
6 min read
Updated: Oct 2026
3 examples
Live preview
CSS offset-rotate property turning an element as it follows a motion path
Definition

Definition and Usage

The offset-rotate property sets how an element faces while it is positioned on an offset-path. Use auto to follow the path direction, reverse to face the other way, or an angle to keep a fixed tilt.

The initial value is auto. You can combine auto with an angle, such as auto 45deg, to follow the path and add a constant offset. It is not inherited, and it is part of the offset shorthand.

Baseline · Formerly motion-rotation.

Not deprecated and not experimental. Early drafts used motion-rotation. Use offset-rotate in new code. Widely available since September 2022.

Syntax

CSS Syntax

syntax.css
offset-rotate: auto | reverse | <angle> | auto <angle> | initial | inherit;
Values

Property Values

ValueDescriptionTry it
autoDefault. Rotate to match the path directionTry it
0degKeep a fixed upright angle while travelingTry it
90degA fixed clockwise angle, ignoring path turnsTry it
reverseLike auto, but face the opposite directionTry it
auto 45degFollow the path, then add 45degTry it
initialSets this property to its default value, autoTry it
inheritInherits this property from the parent elementTry it
Approach

How to Use offset-rotate

Put the element on a path, move it, then choose how it faces.

  1. Set an offset-path.
  2. Animate or set offset-distance so the element travels.
  3. Set offset-rotate to auto, reverse, or an angle. It is not inherited.
  4. Use a pointed shape (arrow or wedge) when learning so rotation is easy to see.
PieceRequired?Role
offset-pathYesThe route that defines “forward” for auto
offset-distanceUsuallyProgress along the path so facing can change
Rotate valueYesauto, reverse, an angle, or auto plus an angle
A directional shapeHelpfulSquares hide rotation; arrows make it obvious
Try it

Live Preview

An arrow travels a curved path. Change offset-rotate and watch how it faces.

The tip of the arrow shows facing. auto turns with the curve; angles stay fixed.

Path

offset-rotate: auto

Code

CSS Examples

Each snippet adds only what offset-rotate needs: a path, distance motion, and a rotate value. Use Try It Yourself for a live editor.

Example 1 — Follow with auto

Let the element turn so it faces along the path direction.

CSS
<style>
  @keyframes travel {
    to { offset-distance: 100%; }
  }
  div {
    width: 28px;
    height: 16px;
    background: #2563eb;
    clip-path: polygon(0% 20%, 65% 20%, 65% 0%, 100% 50%, 65% 100%, 65% 80%, 0% 80%);
    offset-path: path("M 20 100 Q 100 20 180 100 T 340 100");
    offset-rotate: auto;
    animation: travel 4s ease-in-out infinite alternate;
  }
</style>

<div></div>
Try It Yourself

How It Works

  1. Draw a curved path. The quadratic curve gives clear left and right turns.
  2. Use a pointed shape. The arrow tip shows which way the element faces.
  3. Set auto. Rotation matches the path tangent as distance changes.
  4. Animate distance. Without motion along the path, the facing change is hard to notice.

Example 2 — Fixed 0deg

Keep the element upright while it still travels the same curve.

CSS
<style>
  @keyframes travel {
    to { offset-distance: 100%; }
  }
  div {
    width: 28px;
    height: 16px;
    background: #2563eb;
    clip-path: polygon(0% 20%, 65% 20%, 65% 0%, 100% 50%, 65% 100%, 65% 80%, 0% 80%);
    offset-path: path("M 20 100 Q 100 20 180 100 T 340 100");
    offset-rotate: 0deg;
    animation: travel 4s ease-in-out infinite alternate;
  }
</style>

<div></div>
Try It Yourself

How It Works

  1. Same path as Example 1. Only the rotate value changes.
  2. Lock the angle. 0deg keeps a constant orientation relative to the page.
  3. The tip no longer tracks the curve. Useful for badges or labels that must stay readable.
  4. Try 90deg. Another fixed angle, still ignoring path turns.

Example 3 — reverse

Follow the path direction, but face the opposite way.

CSS
<style>
  @keyframes travel {
    to { offset-distance: 100%; }
  }
  div {
    width: 28px;
    height: 16px;
    background: #2563eb;
    clip-path: polygon(0% 20%, 65% 20%, 65% 0%, 100% 50%, 65% 100%, 65% 80%, 0% 80%);
    offset-path: path("M 20 100 Q 100 20 180 100 T 340 100");
    offset-rotate: reverse;
    animation: travel 4s ease-in-out infinite alternate;
  }
</style>

<div></div>
Try It Yourself

How It Works

  1. reverse still tracks the path. It turns with the curve like auto.
  2. Facing is flipped. Same idea as auto 180deg.
  3. Compare with auto. The tip points the other way at every point on the route.
  4. Use for “backing up” looks. Handy when an icon should face opposite the travel direction.

Edge Cases & Pitfalls

If rotation looks wrong or invisible, one of these is usually why.

path

Needs an offset-path

Without a path, auto has no tangent to follow. Set offset-path first.

shape

Squares hide the effect

A perfect square looks the same at many angles. Use an arrow, wedge, or long rectangle while learning.

motion

auto needs changing distance

On a straight path at one distance, auto and a fixed angle can look similar. Animate distance on a curve to see the difference.

name

Not motion-rotation anymore

Old drafts used motion-rotation. Prefer offset-rotate in modern CSS.

a11y

Respect reduced motion

Spinning path demos can distract. Prefer a static distance, or pause motion, when prefers-reduced-motion is reduce.

Compatibility

Browser Support

offset-rotate is a browser CSS property for Motion Path. Node.js, Deno, and Bun do not apply it.

✓ Baseline · Widely available since 2022

offset-rotate

Chrome 55+, Firefox 72+, Safari 15.4+, Edge 79+, Opera 42+. Internet Explorer has no native support.

94% Modern browser support
Google Chrome 55+ · Desktop & Mobile
Full support
Mozilla Firefox 72+ · Desktop & Mobile
Full support
Apple Safari 15.4+ · macOS & iOS
Full support
Microsoft Edge 79+ · Chromium
Full support
Opera 42+ · Modern versions
Full support
Samsung Internet 6.2+ · Android
Full support
Internet Explorer No support
None
offset-rotate Widely supported

Bottom line: Safe for modern motion-path demos. Pair with offset-path and a directional shape so auto vs fixed angles are easy to compare.

Remember

Key Takeaways

  • Role: how the element faces while on the path.
  • Default: auto follows the path. reverse is auto 180deg.
  • Fixed angles: 0deg / 90deg ignore path turns.
  • Needs a path: set offset-path first. Formerly motion-rotation.

One line: offset-rotate chooses facing — follow the path with auto, or lock an angle.

Frequently Asked Questions

It sets how an element faces while it sits on an offset-path. auto follows the path direction; an angle keeps a fixed tilt.
auto. The element rotates to match the direction of the path relative to the positive x-axis.
auto turns with the path. 0deg (or any fixed angle) keeps the same orientation no matter how the path curves.
reverse is like auto, but the element faces the opposite way. It is the same as auto 180deg.
Yes. Set offset-path first, then place or animate offset-distance. Without a path, rotation along a route has nothing to follow.
It is Baseline and widely available since September 2022: Chrome 55+, Firefox 72+, Safari 15.4+, and Edge 79+. Internet Explorer has no support. It is a browser CSS property, not a Node.js feature.

Next: opacity

Learn how to control element transparency in CSS.

opacity tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

CSS offset-path Property CSS opacity Property