CSS offset-rotate property

Definition and Usage

offset-rotate The attribute is used to set the rotation angle of animation elements moving along the path.

Instance

Example 1

Set the rotation angle of the three <img> elements moving along the path:

#fish1 {
  offset-rotate: auto;
}
#fish2 {
  offset-rotate: auto 90deg;
}
#fish3 {
  offset-rotate: 90deg;
}

Try It Yourself

Example 2

Specify the rotation angle of the element using the turn unit instead of deg:

div {
  offset-rotate: 0.25turn;
}

Try It Yourself

CSS Syntax

offset-rotate: auto|angle|initial|inherit;

Attribute Value

Value Description
auto The element faces the direction it moves along the path. Default value.
angle Specify the angle to rotate the element at a constant angle.
auto angle Specify the angle of rotation of the element with both auto and angle, the angle will be added to the default rotation angle, in a clockwise direction.
reverse The element rotates in the opposite direction of the default rotation.
initial Sets this property to its default value. Refer to initial.
inherit Inherits this property from its parent element. Refer to inherit.

Technical Details

Default Value: auto
Inheritance: No
Animation Production: Supported. Refer to:Animation-related properties.
Version: CSS3
JavaScript Syntax: object.style.offsetRotate="45deg"

Browser Support

The numbers in the table represent the browser version that first fully supports this attribute.

Chrome Edge Firefox Safari Opera
56 79 72 16 43

Related Pages

Tutorial:SVG Path

Tutorial:CSS Animation

Reference:CSS offset property

Reference:CSS offset-anchor property

Reference:CSS offset-distance property

Reference:CSS offset-path property

Reference:CSS offset-position property