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 valueauto
Applies totransformable elements
Inheritedno
Computed valueas specified
Animation typeas <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 compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
offset-rotateChrome 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 NoOpera 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 NoWebView 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 NoOpera 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 NoSamsung 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.