CSS rotate 屬性
定義和用法
rotate 屬性允許你旋轉元素。
rotate 屬性定義了一個元素繞 z 軸順時針旋轉多少的角度值。要繞 x 軸或 y 軸或其他方式旋轉元素，必須定義這些。
rotate 屬性的值可以是一個角度、軸名稱+角度，或三個值+角度。
- 如果只給出一個角度，元素將繞 z 軸順時針旋轉。
- 如果給出軸名稱+角度，元素將繞指定的軸順時針旋轉。
- 如果給出三個值+角度，這三個值定義一個向量，元素將繞該向量旋轉。
為了更好地理解 rotate 屬性，請檢視演示。
注意： 另一種旋轉元素的技術是使用 CSS transform 屬性和 CSS rotate() 函式。如本網頁所述，CSS rotate 屬性可以說是更簡單、更直接的縮放元素的方法。
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| rotate | 104 | 104 | 72 | 14.1 | 90 |
CSS 語法
rotate: axis angle|initial|inherit;
屬性值
| 屬性值 | 描述 | 演示 |
|---|---|---|
| axis | 可選。如果未設定，預設為 z 軸。定義元素旋轉的軸。可能的值
|
演示 ❯ |
| angle | 定義元素旋轉的程度。可能單位
|
演示 ❯ |
| vector angle | 三個數字定義了一個向量，元素將繞該向量旋轉。這些數字分別是向量的 x、y 和 z 座標。最後一個值是旋轉的角度。可能的值
|
演示 ❯ |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
當 rotate 屬性用向量和角度設定時，元素將繞該向量旋轉。這裡，向量是 [1 1 0]，在 2D 平面上具有 x 和 y 座標，然後旋轉 60 度
div {
rotate: 1 1 0 60deg;
}
自己動手試一試 »
相關頁面
CSS 教程： CSS 2D 變換
CSS 教程： CSS 3D 變換
CSS scale 屬性：CSS Scale 屬性
CSS translate 屬性：CSS Translate 屬性
