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>

列印頁面