CSS - rotate 屬性

CSS 屬性rotate用於指定元素的旋轉變換，獨立於transform屬性。

此屬性便於介面使用，因為您無需記住變換函式的順序即可在transform屬性中指定。

可能的值

CSS 屬性rotate可以具有以下值之一

角度值：指定一個<angle>值來旋轉元素。等效於rotate() 2D 函式。
x、y 或 z 軸名稱加上角度值：確定元素需要圍繞其旋轉的軸的名稱（x、y 或 z 軸），以及確定旋轉角度的角度值。等效於 3D 空間中的rotateX() / rotateY() / rotateZ()旋轉函式。
向量加上角度值：指定三個<number>，表示一個向量，該向量是一條需要圍繞其進行旋轉的線，以及一個確定旋轉角度的角度值。等效於 3D 空間中的rotate3d()旋轉函式。
none：指定不應用任何旋轉。

應用於

所有可變換的元素。

語法

rotate = none | <angle> | [x | y | z | <number>{3} ] && <angle>

CSS rotate - 元素旋轉

以下示例演示了rotate CSS 屬性的使用，以及傳遞值的各種方式

<html>
<head>
<style>
   .box {
      display: inline-block;
      margin: 0.7em;
      min-width: 5.5em;
      line-height: 6.5em;
      text-align: center;
      transition: 2s ease-in-out;
      border: 2px solid black;
      background-color: lightgreen;
   }

   #rotate-box:hover {
      rotate: 60deg;
   }

   #rotate-x-box:hover {
      rotate: x 180deg;
   }

   #rotate-vector:hover {
      rotate: 0.8 1 0.5 360deg;
   }
</style>
</head>
<body>
   <h1>CSS Rotation Property</h1>
   <div class="box" id="rotate-box">rotate</div>
   <div class="box" id="rotate-x-box">rotate X</div>
   <div class="box" id="rotate-vector">vector with angle</div>
</body>
</html>

列印頁面