offset-rotate
Quick Summary for offset-rotate
The offset-rotate CSS property defines the orientation/direction of the element as it is positioned along the offset-path.
Code Usage for offset-rotate
/* 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;  /* Global values */ offset-rotate: inherit; offset-rotate: initial; offset-rotate: revert; offset-rotate: unset; 
More Details for offset-rotate

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;  /* Global values */ offset-rotate: inherit; offset-rotate: initial; offset-rotate: revert; 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.

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
Motion Path Module Level 1 # offset-rotate-property

See also

offset offset-anchor offset-distance offset-path offset-position

Last modified: Aug 12, 2021, by MDN contributors

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
You drown not by falling in the river, but by staying submerged.
Unknown
Random CSS Property

fallback

The fallback descriptor can be used to specify a counter style to fall back to if the current counter style cannot create a marker representation for a particular counter value.
fallback (@counter-style) css reference