The offset-rotate property specifies the orientation of an element depending on its offset-distance along the offset-path.
In early versions of the specification, this property was called motion-rotation, then it became offset-rotation, and now it is called offset-rotate.
This property has the following values: auto, reverse, <angle>.
Initial Value | auto |
Applies to | Transformable elements. |
Inherited | No. |
Animatable | Yes. |
Version | Motion Path Module Level 1 |
DOM Syntax | object.style.offsetRotate = "auto 90deg"; |
Syntax
offset-rotate: auto | reverse | <angle>;
Example of the offset-rotate property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #ccc;
}
.mover {
width: 70px;
height: 70px;
background: linear-gradient(#8ebf42 50%, #1c87c9 50%);
position: absolute;
left: 40%;
top: 100px;
offset-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z");
offset-rotate: reverse;
animation: move 4s linear infinite;
}
@keyframes move {
100% {
offset-distance: 100%;
}
}
</style>
<body>
<h2>Offset-rotate property example</h2>
<div class="mover"></div>
</body>
</html>
Values
Value | Description |
---|---|
auto | The object is rotated by the angle of the direction of the offset path. |
reverse | The object is rotated by the angle of the direction of the offset path plus 180 degrees. |
<angle> | The box has a constant clockwise rotation transformation applied to it by the specified rotation angle. |
initial | Makes the property use its default value. |
inherit | Inherits the property from its parents element. |
Browser support
56.0+ | ✕ | ✕ | ✕ | ? |
Practice Your Knowledge
What can be achieved using the offset-rotate CSS property?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.