CSS 属性 offset-rotate 指定元素沿着指定的 offset-path 移动时的方向。
属性值
offset-rotate 属性接受以下值。
auto: 当offset-rotate 时使用属性时，默认情况下元素会旋转 offset-path 相对于正 x 轴的角度。
<angle>: 使用提供的旋转角度作为指导，offset-rotate 属性将元素的旋转转换为常数顺时针方向。
auto <angle>: 当 auto 后跟 1 时，auto 的计算值将添加到角度的计算值中。
reverse: offset-rotate 相反值以与 auto 相反的方向旋转元素，但方式与 auto 类似。这与 auto 180deg 相同。
适用范围
可变形元素
语法
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>