CSS offset-rotate Property

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

#fish1 {
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

The numbers in the table specify the first browser version that fully supports the property.

Property
offset-rotate	56.0	79.0	72.0	Not supported	43.0

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

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

Specify the rotation of an element with the 'turn' unit instead of 'deg':

div {
offset-rotate: 0.25turn;
}

HTML SVG tutorial: SVG Path

CSS offset property: CSS Offset property

CSS offset-anchor property: CSS Offset-anchor property

CSS offset-distance property: CSS Offset-distance property

CSS offset-path property: CSS Offset-path property