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 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%; } }
ResultSpecifications
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
Posted in
12:22 am, February 22, 2022
Add Comment
Other Items in CSS
rgb()
rgba()
:right
right
@right-bottom
:root
rotate
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
row-gap
ruby-align
ruby-position
saturate()
scale
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
:scope
scroll-behavior
scroll-margin
scroll-margin-block
scroll-margin-block-end
scroll-margin-block-start
scroll-margin-bottom
scroll-margin-inline
scroll-margin-inline-end
scroll-margin-inline-start
scroll-margin-left
scroll-margin-right
scroll-margin-top
scroll-padding
scroll-padding-block
scroll-padding-block-end
scroll-padding-block-start
scroll-padding-bottom
scroll-padding-inline
scroll-padding-inline-end
scroll-padding-inline-start
scroll-padding-left
scroll-padding-right
scroll-padding-top
scroll-snap-align
scroll-snap-stop
scroll-snap-type
@scroll-timeline