W3cubDocs

/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 1
The definition of 'offset-rotate' in that specification.
Working Draft Initial definition

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
offset-rotate 56
56
55
Uses the non-standard name: offset-rotation
46
Uses the non-standard name: motion-rotation
79
79
79
Uses the non-standard name: offset-rotation
79
Uses the non-standard name: motion-rotation
72
72
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.
No 43
43
42
Uses the non-standard name: offset-rotation
33
Uses the non-standard name: motion-rotation
No
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
offset-rotate 56
56
55
Uses the non-standard name: offset-rotation
46
Uses the non-standard name: motion-rotation
56
56
55
Uses the non-standard name: offset-rotation
46
Uses the non-standard name: motion-rotation
No 43
43
42
Uses the non-standard name: offset-rotation
33
Uses the non-standard name: motion-rotation
No 6.0
6.0
6.0
Uses the non-standard name: offset-rotation
5.0
Uses the non-standard name: motion-rotation

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/offset-rotate