Atributo offset-rotate de CSS

Definition and usage

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

Example

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

Use the turn unit instead of deg to specify the rotation angle of the element:

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 both 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

Páginas relacionadas

Tutoriales:Rutas SVG

Tutoriales:CSS animación

Referencia:Atributo offset de CSS

Referencia:Atributo offset-anchor de CSS

Referencia:Atributo offset-distance de CSS

Referencia:Atributo offset-path de CSS

Referencia:Atributo offset-position de CSS