CSS - offset-rotate 属性

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>

打印本页