Web/CSS/offset-rotate

The offset-rotate CSS property defines the orientation/direction of the element as it is positioned along the offset-path.

Note: Early versions of the spec called this property motion-rotation.

Syntax

/* Follow the path direction, with optional additional angle */
offset-rotate: auto;
offset-rotate: auto 45deg;

/* Follow the path direction but facing the opposite direction of `auto` */
offset-rotate: reverse;

/* Keep a constant rotation regardless the position on the path */
offset-rotate: 90deg;
offset-rotate: .5turn;

auto: The element is rotated by the angle of the direction of the offset-path, relative to the positive x-axis. This is the default value.
<angle>: The element has a constant clockwise rotation transformation applied to it by the specified rotation angle.
auto <angle>: If auto is followed by an <angle>, the computed value of the angle is added to the computed value of auto.
reverse: The element is rotated similar to auto, except it faces the opposite direction. It is the same as specifying a value of auto 180deg.

Formal definition

Initial value	`auto`
Applies to	transformable elements
Inherited	no
Computed value	as specified
Animation type	as <angle>, <basic-shape> or <path()>

Formal syntax

[ auto | reverse ] || <angle>

Examples

Setting element orientation along its offset path

HTML

<div></div>
<div></div>
<div></div>

CSS

div {
  width: 40px;
  height: 40px;
  background: #2BC4A2;
  margin: 20px;
  clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);
  animation: move 5000ms infinite alternate ease-in-out;
 
  offset-path: path('M20,20 C20,50 180,-10 180,20');
}
div:nth-child(1) {
  offset-rotate: auto;
}
div:nth-child(2) {
  offset-rotate: auto 90deg;
}
div:nth-child(3) {
  offset-rotate: 30deg;
}

@keyframes move {
  100% {
    offset-distance: 100%;
  }
}

Result

Specifications

Specification	Status	Comment
Motion Path Module Level 1The definition of 'offset-rotate' in that specification.	Working Draft	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`offset-rotate`	Chrome Full support 56 Full support 56 Full support 55 Alternate Name' Alternate Name' Uses the non-standard name: `offset-rotation` Full support 46 Alternate Name' Alternate Name' Uses the non-standard name: `motion-rotation`	Edge Full support 79 Full support 79 Full support 79 Alternate Name' Alternate Name' Uses the non-standard name: `offset-rotation` Full support 79 Alternate Name' Alternate Name' Uses the non-standard name: `motion-rotation`	Firefox Full support 72 Full support 72 No support 69 — 72 Disabled' Disabled' From version 69 until version 72 (exclusive): this feature is behind the `layout.css.motion-path.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support 43 Full support 43 Full support 42 Alternate Name' Alternate Name' Uses the non-standard name: `offset-rotation` Full support 33 Alternate Name' Alternate Name' Uses the non-standard name: `motion-rotation`	Safari No support No	WebView Android Full support 56 Full support 56 Full support 55 Alternate Name' Alternate Name' Uses the non-standard name: `offset-rotation` Full support 46 Alternate Name' Alternate Name' Uses the non-standard name: `motion-rotation`	Chrome Android Full support 56 Full support 56 Full support 55 Alternate Name' Alternate Name' Uses the non-standard name: `offset-rotation` Full support 46 Alternate Name' Alternate Name' Uses the non-standard name: `motion-rotation`	Firefox Android No support No	Opera Android Full support 43 Full support 43 Full support 42 Alternate Name' Alternate Name' Uses the non-standard name: `offset-rotation` Full support 33 Alternate Name' Alternate Name' Uses the non-standard name: `motion-rotation`	Safari iOS No support No	Samsung Internet Android Full support 6.0 Full support 6.0 Full support 6.0 Alternate Name' Alternate Name' Uses the non-standard name: `offset-rotation` Full support 5.0 Alternate Name' Alternate Name' Uses the non-standard name: `motion-rotation`

Legend

Full support: Full support
No support: No support
User must explicitly enable this feature.': User must explicitly enable this feature.
Uses a non-standard name.': Uses a non-standard name.

offset-rotate by Mozilla Contributors is licensed under CC-BY-SA 2.5.