CSS offset-rotate property

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 Value	auto
Applies to	Transformable elements.
Inherited	No.
Animatable	Yes.
Version	Motion Path Module Level 1
DOM Syntax	object.style.offsetRotate = "auto 90deg";

Syntax

CSS offset-rotate syntax

css

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

Example of the offset-rotate property:

CSS offset-rotate code example

html

<!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>

Values

Value	Description
auto	The object is rotated by the angle of the direction of the offset path.

reverse	The 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.
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.

Practice

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

It controls the orientation of the element.It sets the color of the element.It positions the element relative to its normal position.It creates 3D transforms for an element.It sets the rotation point relative to the position property.

CSS offset-rotate property ​

Syntax ​

Example of the offset-rotate property: ​

Values ​

Practice ​

CSS offset-rotate property

Syntax

Example of the offset-rotate property:

Values

Practice