CSS offset-rotate Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The offset-rotate property controls how an element is rotated as it follows a motion path. It governs whether the element should align to the direction of the path, stay at a fixed orientation, or be given an extra angular offset relative to the path’s direction - effectively producing a rotation transform that makes the object "face" along, against, or independently of the path defined by offset-path and positioned using offset-distance. Think of it as the rule that decides the element’s heading while it moves.

That rotation is generated as part of the motion-path effect and composes with the element’s other transforms, so it should be considered together with transform. In practice that means the final visual orientation can be affected by transform origin, scaling, and any preexisting rotation on the element - combining offset rotation with other transforms can produce subtle changes in pivot and visual result, so you often need to coordinate origin and transform order to get the intended effect.

Because the property controls a transform-like effect, it’s very useful in animations: you can smoothly interpolate an element’s orientation as it moves along a curved route, or deliberately prevent rotation so an item remains upright even while its position follows a path. Be aware that sharp corners or sudden path changes produce abrupt orientation changes unless you smooth the motion (for example by easing the distance or smoothing the path geometry).

In everyday use, offset-rotate is handy for orienting arrows, vehicles, or labels to a route, adding a small visual offset so an object appears to “steer” rather than perfectly hug the tangent, or keeping text readable by disabling automatic rotation. Common pitfalls include unexpected interactions with layout and hit-testing because rotated bounding boxes change overflow and pointer regions, and visual surprises when combining path-based rotation with other transforms - when precise control is required, combine motion-path rotation with explicit transforms and carefully chosen transform-origin to achieve predictable results.

Definition

Initial value: auto
Applies to: transformable elements
Inherited: no
Computed value: as specified
Animatable: as <angle>, <basic-shape> or path()
JavaScript syntax: object.style.offsetRotate

Interactive Demo

offset-rotate: auto;

offset-rotate: 90deg;

offset-rotate: auto 90deg;

offset-rotate: reverse;

Syntax

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

Values

autoThe element is rotated by the angle of the direction of the offset-path, relative to the positive x-axis. This is the default value.
<angle>The element has a constant clockwise rotation transformation applied to it by the specified rotation angle.
auto <angle>If auto is followed by an <angle>, the computed value of the angle is added to the computed value of auto.
reverseThe element is rotated similar to auto, except it faces the opposite direction. It is the same as specifying a value of auto 180deg.

Example

HTML

<div class="container">

  <div class="path-visual"></div>

  <div class="moving-object">✈️</div>

</div>

CSS

.container {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 50px auto;
  border: 1px dashed #ccc;
}

/* Optional: Visualizes the path for clarity */
.path-visual {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid #eee;
  border-radius: 50%;
  top: 50px;
  left: 50px;
}

.moving-object {
  width: 40px;
  height: 40px;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* 1. Define the path (a circle in this case) */
  offset-path: path('M 150,50 A 100,100 0 1,1 149.9,50 z');
  
  /* 2. Define the rotation */
  /* 'auto' makes the element face the direction of the path */
  /* 'auto 90deg' would tilt it 90 degrees relative to the path */
  offset-rotate: auto;

  /* 3. Animate the movement */
  animation: move 5s infinite linear;
}

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

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS offset-rotate property. Hover over a browser icon to see the version that first introduced support for this CSS property.