CSS 属性 offset-rotate 指定元素沿指定偏移路径移动时的方向或方向。
可能的值
offset-rotate 属性接受以下值。
- auto - 使用 offset-rotate 属性时，默认情况下，元素会按偏移路径相对于正 x 轴的角度旋转。
- <angle> - 使用提供的旋转角度作为指导，offset-rotate 属性将元素的旋转沿恒定的顺时针方向转换。
- auto <angle> - 当 auto 后跟 1 时，auto 的计算值将添加到角度的计算值中。
- reverse - 偏移-旋转反向值使元素以与 auto 相反的方向旋转，但其方式类似于 auto。这相当于说自动 180 度。
适用于
可转换元素
语法
offset-rotate = [ auto | reverse ] || <angle>
CSS offset-rotate - 基本示例
下面的示例演示了 offset-rotate 属性的用法。
<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>
这是另一个示例，演示了 offset-rotate 属性的用法。
<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>
