CSS rotate3d() 函數

定義和用法

CSS rotate3d() 函數定義了元素的 3D 旋轉。

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

實例

例子 1

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

#myDiv1 {
  transform: rotate3d(1, 2, 1, 45deg);
}
#myDiv2 {
  transform: rotate3d(0, 1, 0, 60deg);
}
#myDiv3 {
  transform: rotate3d(1, 0, 0, 45deg);
}

親自試一試

例子 2

使用 rotate3d() 旋轉圖像：

#img1 {
  transform: rotate3d(1, 2, 1, 45deg);
}
#img2 {
  transform: rotate3d(0, 1, 0, 60deg);
}
#img3 {
  transform: rotate3d(1, 0, 0, 45deg);
}

親自試一試

CSS 語法

rotate3d(x, y, z, angle)

技術細節

瀏覽器支持

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

相關頁面

教程：CSS 3D 變換

參考：CSS transform 屬性

參考：CSS rotate 屬性

參考：CSS rotate() 函數

參考：CSS rotateX() 函數

參考：CSS rotateY() 函數

參考：CSS rotateZ() 函數