The offset-rotate
CSS property defines the orientation/direction of the element as it is positioned along the offset-path
.
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
.
/* 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: 0.5turn; /* Global values */ offset-rotate: inherit; offset-rotate: initial; offset-rotate: revert; offset-rotate: revert-layer; offset-rotate: unset;
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
.
Initial value | auto |
---|---|
Applies to | transformable elements |
Inherited | no |
Computed value | as specified |
Animation type | as <angle>, <basic-shape> or <path()> |
<div></div> <div></div> <div></div>
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%; } }
Specification |
---|
Motion Path Module Level 1 # offset-rotate-property |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
offset-rotate |
565546 | 797979 | 72 | No | 434233 | preview | 565546 | 565546 | No | 434233 | No | 6.06.05.0 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/offset-rotate