CSS offset-rotate Property

❮ Previous Reference Next ❯

Example

div {
  width: 40px;
  height: 40px;
  background: tomato;
  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%;
  }
}
Try this code ❯

Meaning:

The offset-rotate CSS property defines the orientation/direction of the element as it is positioned along the offset-path.

Note: Early versions of the spec called this property motion-rotation.

Default value:0
Inherited:No
Animatable:Yes
Version:CSS3
JavaScript syntax:
object.style.offsetRotate="auto|angle|[auto angle]|reverse|initial|inherit|revert|revert-layer|unset";


Standard Syntax

offset-rotate: auto|angle|[auto angle]|reverse|initial|inherit|revert|revert-layer|unset;


Browser Support



Status





Property Values

The following table describes the values of this property:

Value Description
auto The 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.

Possible values:

  • deg - Represents an angle in degrees. One full circle is 360deg. Examples: 0deg, 90deg, 14.23deg.
  • grad - Represents an angle in gradians. One full circle is 400grad. Examples: 0grad, 100grad, 38.8grad.
  • rad - Represents an angle in radians. One full circle is 2π radians which approximates to 6.2832rad. 1rad is 180/π degrees. Examples: 0rad, 1.0708rad, 6.2832rad.
  • turn - Represents an angle in a number of turns. One full circle is 1turn. Examples: 0turn, 0.25turn, 1.2turn.
[auto angle] If auto is followed by an angle, the computed value of the angle is added to the computed value of auto.
reverse The element is rotated similar to auto, except it faces the opposite direction. It is the same as specifying a value of auto 180deg.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.


Default CSS Property Values

selectors {
  offset-rotate: ;
}
❮ Previous Reference Next ❯