CSS offset-rotate attribute

Definition and Usage

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

Example

Example 1

Sets 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 Specifies the angle of rotation of the element at a constant angle.
auto angle Simultaneously specify auto and angle, the angle is 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. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical Details

Default Value: auto
Inheritance: No
Animation creation: Supported. See: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 property.

Chrome Edge Firefox Safari Opera
56 79 72 16 43

Σχετικές σελίδες

Εκμάθηση:Συμβολοσειρά SVG

Εκμάθηση:Κινηματογράφηση CSS

Αναφορά:CSS offset attribute

Αναφορά:CSS offset-anchor attribute

Αναφορά:CSS offset-distance attribute

Αναφορά:CSS offset-path attribute

Αναφορά:CSS offset-position attribute