W3docs
en
Log in

CSS offset-rotate property

Use the offset-rotate CSS property for specifying the angle of the box along the offset-path. Read about property values and try examples.

The offset-rotate property specifies the orientation of an element depending on its offset-distance along the offset-path.

In early versions of the specification, this property was called motion-rotation, then it became offset-rotation, and now it is called offset-rotate.

This property has the following values: auto, reverse, <angle>.

Initial Valueauto
Applies toTransformable elements.
InheritedNo.
AnimatableYes.
VersionMotion Path Module Level 1
DOM Syntaxobject.style.offsetRotate = "auto 90deg";

Syntax

CSS offset-rotate syntax

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

Example of the offset-rotate property:

CSS offset-rotate code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #ccc;
      }
      .mover {
        width: 70px;
        height: 70px;
        background: linear-gradient(#8ebf42 50%, #1c87c9 50%);
        position: absolute;
        left: 40%;
        top: 100px;
        offset-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z");
        offset-rotate: reverse;
        animation: move 4s linear infinite;
      }
      @keyframes move {
        100% {
          offset-distance: 100%;
        }
      }
    </style>
    <body>
      <h2>Offset-rotate property example</h2>
      <div class="mover"></div>
    </body>
</html>
Try it Yourself »

Values

ValueDescription
autoThe object is rotated by the angle of the direction of the offset path.
reverseThe object is rotated by the angle of the direction of the offset path plus 180 degrees.
<angle>The box has a constant clockwise rotation transformation applied to it by the specified rotation angle.
initialMakes the property use its default value.
inheritInherits the property from its parents element.

Practice

Practice

What can be achieved using the offset-rotate CSS property?