How CSS offset-rotate Aligns Elements on a Path

The CSS offset-rotate property defines the orientation of an element as it travels along a motion curve defined by offset-path. By dynamically calculating the tangent of the path at the element's current position, offset-rotate allows an object—such as a vehicle, arrow, or character—to automatically turn and face the direction of travel, maintain a fixed offset, or remain static. This article explains how the property calculates orientation along curves, its available values, and how it interacts with motion paths.

Tangent Calculation Along Curves

When an element moves along a curve using the CSS Motion Path module, its position is determined by offset-path (typically an SVG path or geometric shape) and offset-distance.

To align the element to this path, the browser calculates the mathematical derivative (the tangent vector) of the curve at the exact point specified by offset-distance. The tangent represents the instantaneous direction of movement at that coordinates. The offset-rotate property uses this tangent vector as its baseline reference to rotate the element's local coordinate system.

Key Values and Orientation Behaviors

The offset-rotate property accepts keywords, angles, or combinations of both to control how the element reacts to the path's curves:

• auto: The default behavior in the motion path specification. The element rotates automatically so that its positive horizontal axis (facing right by default) aligns directly with the tangent of the curve. As the curve bends, the element rotates continuously to face forward along the direction of the trajectory.
• auto <angle>: Keeps the element linked to the curve's direction while adding a constant rotational offset. For example, offset-rotate: auto 90deg; rotates the element to face perpendicular to the direction of travel, which is useful if the graphic was designed facing upward rather than to the right. Negative values (e.g., auto -45deg) rotate the element counter-clockwise relative to the tangent.
• reverse: Identical to auto 180deg. It flips the element to face completely backward along the path tangent, pointing opposite the direction of motion.
• <angle> (Fixed Rotation): Setting a standalone angle, such as offset-rotate: 0deg; or offset-rotate: 45deg;, disables dynamic alignment to the curve. The element maintains that exact static rotation throughout the entire animation, regardless of how sharply the motion path twists or turns.

Practical Implementation

To align an element to a motion curve, pair offset-rotate with offset-path and an animated offset-distance:

.moving-item {
  /* Define the motion curve */
  offset-path: path("M 20 80 Q 100 10, 180 80 T 340 80");
  
  /* Align to the tangent plus a 45-degree tilt */
  offset-rotate: auto 45deg;
  
  /* Animate along the path */
  animation: moveAlongPath 4s infinite linear;
}

@keyframes moveAlongPath {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}

Transform Origin and Alignment Points

The point around which the element rotates is governed by transform-origin (or offset-anchor if supported and specified). By default, elements rotate around their center (50% 50%). If the rotation feels off-axis during sharp turns on a curve, adjusting transform-origin to match the focal point or center of mass of the graphic ensures natural-looking orientation changes as the element follows the path.