コース推薦：

CSS rotate3d() 関数

定義と使用方法 rotate3d() CSS

rotate3d() 関数は、要素の3D回転を定義します。 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() 函数