CSS - offset-rotate Property
The CSS property offset-rotate specifies the orientation or direction of an element as it moves along the specified offset-path.
Possible Value
The following value are accepted for offset-rotate property.
auto - When the offset-rotate property is used, the element is rotated by the offset-path's angle with respect to the positive x-axis by default.
<angle> - Using the supplied rotation angle as a guide, the offset-rotate property transforms the element's rotation in a constant clockwise direction.
auto <angle> - The computed value of auto is added to the computed value of the angle when auto is followed by one.
reverse - The offset-rotate reverse value spins the element in the opposite direction from auto but in a manner similar to that of auto. It's the same as saying auto 180deg.
Applies to
Transformable elements
Syntax
offset-rotate = [ auto | reverse ] || <angle>
CSS offset-rotate - Basic Example
The following example demonstrates the usage of offset-rotate property.
<html> <head> <style> .div-container { display: flex; } .div { width: 60px; height: 60px; background: #2bc4a2; margin: 20px; offset-path: path("M20,20 C20,50 180,-10 180,20"); animation: moveRotate 5s infinite linear alternate; } .div:nth-child(1) { offset-rotate: auto; } .div:nth-child(2) { offset-rotate: auto 30deg; } .div:nth-child(3) { offset-rotate: auto 45deg; } @keyframes moveRotate { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } </style> </head> <body> <div class="div-container"> <div class="div"></div> <div class="div"></div> <div class="div"></div> </div> </body> </html>
Here is another example demonstrating the usage of offset-rotate property.
<html> <head> <style> div { width: 90px; height: 90px; background: #ff6384; margin: 20px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); animation: move 6000ms infinite alternate ease-in-out; offset-path: path("M20,20 C20,50 180,-10 180,20"); } div:nth-child(1) { background-color: #2bc4a2; offset-rotate: auto; } div:nth-child(2) { background-color: #ffce56; offset-rotate: auto 45deg; } div:nth-child(3) { background-color: #36a2eb; offset-rotate: auto 90deg; } div:nth-child(4) { background-color: #eb34e5; offset-rotate: auto 120deg; } @keyframes move { 100% { offset-distance: 200%; } } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>
To Continue Learning Please Login
Login with Google