CSS offset-rotate Property

Description

The offset-rotate CSS property defines the orientation/direction of an element as it is positioned along the offset-path. It is a relatively new property, and is still under development in some browsers. The offset-path property defines a path along which an element can be animated. The offset-rotate property controls how the element is rotated as it moves along the path.

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></div>

<div></div>

<div></div>

CSS

div {
  width: 40px;
  height: 40px;
  background: #2bc4a2;
  margin: 20px;
  clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);
  animation: move 5000ms infinite alternate ease-in-out;

  offset-path: path("M20,20 C20,50 180,-10 180,20");
}
div:nth-child(1) {
  offset-rotate: auto;
}
div:nth-child(2) {
  offset-rotate: auto 90deg;
}
div:nth-child(3) {
  offset-rotate: 30deg;
}

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

Result

Editor