CSS rotate() 函數

定義和用法

CSS 的 rotate() 函數定義元素的 2D 旋轉。

rotate() 函數在 transform 屬性中使用。

實例

例子 1

使用 rotate() 旋轉多個 <div> 元素：

#myDiv1 {
  transform: rotate(25deg);
}
#myDiv2 {
  transform: rotate(45deg);
}
#myDiv3 {
  transform: rotate(-45deg);
}

親自試一試

例子 2

使用 rotate() 旋轉圖像：

#img1 {
  transform: rotate(90deg);
}
#img2 {
  transform: rotate(45deg);
}
#img3 {
  transform: rotate(-45deg);
}

親自試一試

CSS 語法

rotate(angle)
值 描述
angle

必需。指定旋轉角度。可能的單位：

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

技術細節

版本： CSS Transforms Module Level 1

瀏覽器支持

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

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

相關頁面

教程：CSS 2D 變換

參考：CSS transform 屬性

參考：CSS rotate 屬性

參考：CSS rotate3d() 函數

參考：CSS rotateX() 函數

參考：CSS rotateY() 函數

參考：CSS rotateZ() 函數