CSS rotate 屬性

定義和用法

rotate 屬性允許你旋轉元素。

rotate 屬性定義了一個值，表示元素繞 z 軸順時針旋轉的程度。要繞 x 軸或 y 軸或其他方式旋轉元素，必須進行相應的定義。

rotate 屬性的值可以是一個角度、軸名稱 + 角度，或三個值 + 角度。

  • 如果只給出一個角度，元素將繞 z 軸順時針旋轉。
  • 如果給出軸名稱 + 角度，元素將繞指定的軸順時針旋轉。
  • 如果給出三個值 + 角度，這三個值定義了一個向量，元素將繞該向量旋轉。

為了更好地理解 rotate 屬性，請查看演示。

注意：旋轉元素的另一種技術是使用帶有 CSS rotate() 函數 的 CSS transform 屬性。

實例

例子 1

更改元素的旋轉：

div {
  rotate: 30deg;
}

親自試一試

例子 2

當 rotate 屬性設置為向量和角度時，元素將繞該向量旋轉。

在這里，向量是二維平面中的 [1 1 0]，具有 x 和 y 坐標，然后旋轉 60 度：

div {
  rotate: 1 1 0 60deg;
}

親自試一試

CSS 語法

rotate: axis angle|initial|inherit;

屬性值

值 描述
axis

可選。如果未設置，默認值為 z 軸。定義元素繞其旋轉的軸。可能的值：

  • x
  • y
  • z
angle

定義元素的旋轉程度。可能的單位：

  • deg（度）
  • rad（弧度）
  • turn（圈）
vector angle

三個數字定義了一個向量，元素將繞該向量旋轉。

這三個數字分別是向量的 x、y 和 z 坐標。

最后一個值是旋轉的角度。

可能的值：

number number number angle
initial 將此屬性設置為其默認值。參閱 initial。
inherit 從其父元素繼承此屬性。參閱 inherit。

技術細節

默認值： none
繼承性： 否
動畫制作： 支持。請參閱：動畫相關屬性。
版本： CSS3
JavaScript 語法： object.style.rotate="-120deg"

瀏覽器支持

表格中的數字表示首個完全支持該屬性的瀏覽器版本。

Chrome Edge Firefox Safari Opera
104 104 72 14.1 90

相關頁面

教程：CSS 2D 變換

教程：CSS 3D 變換

參考：CSS scale 屬性

參考：CSS translate 屬性