CSS - offset-rotate 属性

CSS 属性 `offset-rotate` 指定元素沿指定的 offset-path 移动时的方向。

可能的值

以下值为 `offset-rotate` 属性所接受。

auto - 使用 `offset-rotate` 属性时，默认情况下，元素会根据 offset-path 相对于正 x 轴的角度进行旋转。
<angle> - 使用提供的旋转角度作为指导，`offset-rotate` 属性以恒定的顺时针方向变换元素的旋转。
auto <angle> - 当 `auto` 后跟一个角度值时，计算出的 `auto` 值会添加到计算出的角度值。
reverse - `offset-rotate` 的 `reverse` 值使元素的旋转方向与 `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>

打印页面