CSS offset-rotate Property
Example
Set rotation of three <img> elements moving along a path:
#fish1 {
offset-rotate: auto;
}
#fish2 {
offset-rotate: auto 90deg;
}
#fish3 {
offset-rotate: 90deg;
}
Try it Yourself »
offset-rotate: auto;
}
#fish2 {
offset-rotate: auto 90deg;
}
#fish3 {
offset-rotate: 90deg;
}
More "Try it Yourself" examples below.
Definition and Usage
The offset-rotate property sets the rotation of an animated element moving along a path.
| Default value: | auto |
|---|---|
| Inherited: | no |
| Animatable: | yes. Read about animatable Try it |
| Version: | CSS3 |
| JavaScript syntax: | object.style.offsetRotate="45deg" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| offset-rotate | 56 | 79 | 72 | 16 | 43 |
CSS Syntax
offset-rotate: auto|value|initial|inherit;
Property Values
| Value | Description |
|---|---|
| auto | The element is facing the direction it moving along a path. This is default. |
| <angle> | Specifies how much to rotate an element with an constant angle. |
| auto <angle> | With both auto and <angle> given, the angle is added to the default rotation, in the clockwise direction. |
| reverse | The element is rotated in the opposite direction of the default rotation. |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example
Specify the rotation of an element with the 'turn' unit instead of 'deg':
div {
offset-rotate: 0.25turn;
}
Try it Yourself »
offset-rotate: 0.25turn;
}
Related Pages
SVG tutorial: SVG Path
CSS tutorial: CSS Animations
CSS reference: CSS offset property
CSS reference: CSS offset-anchor property
CSS reference: CSS offset-distance property
CSS reference: CSS offset-path property
CSS reference: CSS offset-position property