CSS 函式 - rotate3d()

CSS 中的 **rotate3d()** 函式用於圍繞三維表面上的固定軸旋轉元素，而不會導致任何變形。結果為 **transform()** 資料型別。

在三維空間（3D）中，旋轉有三個自由度，它們組合起來被稱為單個旋轉軸。此旋轉軸由 [x，y，z] 向量定義，並透過原點。

當向量未標準化時，即其三個座標的平方和不為 1，則使用者代理會在內部對其進行標準化。對於不可標準化的向量（例如零向量，即 [0，0，0]），旋轉將被忽略，而不會使整個 CSS 屬性無效。

可能的值

**rotate3d()** 函式接受四個值，即三個座標值（x、y、z）和一個角度 (a)。

**x**：一個數字，表示表示旋轉軸的向量的 x 座標。可以是正數或負數。
**y**：一個數字，表示表示旋轉軸的向量的 y 座標。可以是正數或負數。
**z**：一個數字，表示表示旋轉軸的向量的 z 座標。可以是正數或負數。
**a**：一個角度，表示旋轉的角度。正角度使元素順時針旋轉；而負角度使元素逆時針旋轉。

語法

**rotate3d()** 函式由三個 **<number>** 和一個 **<angle>** 指定。向量的三個座標 (x、y、z) 表示旋轉軸，由 **<number>** 表示。**<angle>** 表示旋轉角度，當為正時，元素順時針旋轉，當為負時，元素逆時針旋轉。

transform: rotate3d(x, y, z, a);

CSS rotate3d() - 正值和負值

以下是用各種值作為引數的 rotate3d() 函式示例，包括正值和負值。

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      margin-bottom: 1em;
   }

   .rotate-all-positive {
      background-color: lightgreen;
      transform: rotate3d(2, 1, 1, 45deg);
   }

   .rotate-all-negative {
      background-color: tomato;
      transform: rotate3d(-2, -1, -1, 45deg);
   }

   .rotate-mixed {
      background-color: cyan;
      transform: rotate3d(1,-2, 1, -60deg);
   }
</style>
</head>
<body>
   <div>No function</div>
   <div class="rotate-all-positive">
      rotate3d(2,1,1,45deg)  
   </div>
   <div class="rotate-all-negative">
      rotate3d(-2,-1,-1,45deg)  
   </div>
   <div class="rotate-mixed">
      rotate3d(1,-2,-1,-60deg)
   </div>
</body>
</html>

CSS rotate3d() - 在所有軸上分別旋轉

以下是用 rotate3d() 函式分別顯示在各個軸 (x、y、z) 上旋轉的示例。

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      background-color: peachpuff;
      margin-bottom: 1em;
   }

   .rotate-x-axis {
      background-color: lightgreen;
      transform: rotate3d(1, 0, 0, 45deg);
   }

   .rotate-y-axis {
      background-color: tomato;
      transform: rotate3d(0, 1, 0, 45deg);
   }

   .rotate-z-axis {
      background-color: lightblue;
      transform: rotate3d(0, 0, 1, 45deg);
   }
</style>
</head>
<body>
   <div>No function</div>
   <div class="rotate-x-axis">
      rotate3d(1,0,0,45deg)  
   </div>
   <div class="rotate-y-axis">
      rotate3d(0,1,0,45deg)  
   </div>
   <div class="rotate-z-axis">
      rotate3d(0,0,1,45deg)  
   </div>
</body>
</html>

列印頁面