offset-rotate
offset-rotate sets the direction of an element placed on the path of offset-path. With the initial value auto, the element turns to follow the direction the path runs.
Syntax
[ auto | reverse ] || <angle>Preview
Presets
Drag the bottom-right corner to resize
Code
.box > :nth-child(2) {
offset-path: path("M 20 80 C 80 0 160 160 220 80");
offset-distance: 30%;
offset-rotate: 0deg;
}Controls
offset-rotate0deg
How to set the direction
Angle
About
Writing the value
auto: the initial value. Turns the element to follow the direction of the path at that point, so the element's rightward direction (the direction horizontal text runs) lines up with the path.reverse: the same asauto 180deg; the element faces against the path.- An angle: keeps the element turned by that angle, whatever the direction of the path.
0degdoes not turn it.
Writing an angle together with auto or reverse adds it to the path's direction. With auto 90deg, the element turns 90 degrees clockwise from the direction the path runs.
The preview writes a wave-shaped path on the item with offset-path and puts it 30% of the way along with offset-distance. With auto, the right-pointing arrow tilts down to the right, following the path.
When to use it
Use auto to point a picture such as a vehicle in the direction it moves along the path, and 0deg for things that should not tilt, such as text.
Watch out
- Nothing happens while offset-path is
none. - Because the initial value is
auto, writing offset-path alone turns the element. Write0degto keep it upright. - Works from Chrome and Edge 56, Firefox 72, and Safari 16.