CSS offset-rotate Property

The offset-rotate property defines the orientation and rotation of an element as it moves along a trajectory defined by the offset-path property.

selector { offset-rotate: [ auto | <angle> ] || <angle>; }
auto The element rotates to match the direction of the offset-path at its current position.
<angle> The element maintains a constant fixed rotation regardless of the path direction.
auto <angle> The element follows the path direction but adds a specified fixed angle offset.
reverse The element faces the opposite direction of the path flow, effectively adding 180 degrees to auto.

Code Examples

A basic example showing a red element representing a car that automatically rotates to face the direction of the curved path it follows.

<style>
.track {
  width: 300px;
  height: 200px;
  border: 2px dashed #cccccc;
  position: relative;
}
.car {
  width: 40px;
  height: 20px;
  background: #ff0000;
  offset-path: path("M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80");
  offset-rotate: auto;
  animation: drive 5s infinite alternate ease-in-out;
}
@keyframes drive {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}
</style>
<div class="track">
  <div class="car"></div>
</div>

An advanced example using JavaScript to toggle the offset-rotate property between auto and reverse, changing the orientation of a ship element dynamically.

<style>
#ship {
  width: 50px;
  height: 50px;
  background: #0077ff;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  offset-path: ray(45deg closest-side);
  transition: offset-rotate 0.5s;
}
</style>
<div id="ship"></div>
<button onclick="toggleReverse()">Reverse Heading</button>
<script>
function toggleReverse() {
  const ship = document.getElementById("ship");
  if (ship.style.offsetRotate === "reverse") {
    ship.style.offsetRotate = "auto";
    ship.style.backgroundColor = "#0077ff";
  } else {
    ship.style.offsetRotate = "reverse";
    ship.style.backgroundColor = "#ffaa00";
  }
}
</script>

Pro Tip

You can animate the angle portion of the offset-rotate property independently from the movement. This is a great way to simulate a plane doing a barrel roll or a car spinning out while it continues to travel along its designated path. Just transition the angle value while the offset-distance is also animating.

Deep Dive

Think of offset-rotate as the steering wheel for an object traveling on a track. When you move an element using offset-path, it does not automatically know which way to face. By default, the auto value ensures the element noses into the curve, much like a car following a winding road. The browser calculates the tangent of the path at the element's current position to determine the correct angle. If you provide a fixed angle instead, the element will stay locked in that orientation, behaving more like a block of ice sliding across a surface. You can also combine auto with a specific degree to correct the heading of assets that were not drawn facing to the right by default.

Best Practices

Use the auto value for the most natural movement when animating vehicles, arrows, or characters along a path. If your graphic asset is drawn facing upward instead of to the right, use offset-rotate: auto 90deg; to fix its alignment relative to the path. Always pair this property with offset-path and offset-distance to create a complete motion path effect.

Common Pitfalls

The most common mistake is trying to use offset-rotate without defining an offset-path first; the property will have no visible effect because there is no path direction to reference. Additionally, remember that this property is distinct from the standard transform: rotate() property. While transform rotates an element around its own origin, offset-rotate specifically reacts to the geometry of the motion path.

Accessibility

Animations involving rotation and movement can cause motion sickness or vestibular issues for some users. Use the prefers-reduced-motion media query to either slow down the animation or set offset-rotate to a static value for users who have indicated a preference for reduced motion.

Dev Data Table: offset-rotate property

default auto
animatable yes
inherited no
experimental no
year_intro 2016
year_standard 2023
js_syntax_1 element.style.offsetRotate = "auto 45deg";
js_syntax_2 element.style.setProperty("offset-rotate", "reverse");
js_note When manipulating this property in JavaScript, ensure the value is passed as a string and includes units for angle values like deg or rad.
browsers { "Chrome": 55, "Edge": 79, "Firefox": 72, "Safari": 16, "Opera": 42, "Chrome Android": 55, "Safari on iOS": 16, "Samsung Internet": 6, "Opera Mobile": 42 }
results render here...