offset-rotate
CSS offset-rotate property
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
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
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. |