CSS offset-rotate property

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

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

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

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>

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.




Related articles