コース推薦：

CSS rotateY() 関数

定義と使用方法 rotateY() CSS

rotateY() 関数は、要素がy軸（垂直方向）に沿っての3D回転を定義しています。 transform 属性で使用されています。

インスタンス

例 1

を使用して rotateY() y軸（垂直方向）に沿って複数の<div>要素を回転：

#myDiv1 {
  transform: rotateY(40deg);
}
#myDiv2 {
  transform: rotateY(60deg);
}
#myDiv3 {
  transform: rotateY(80deg);
}

実際に試してみる

例 2

を使用して rotateY() y軸（垂直方向）に沿って画像を回転：

#img1 {
  transform: rotateY(40deg);
}
#img2 {
  transform: rotateY(60deg);
}
#img3 {
  transform: rotateY(80deg);
}

実際に試してみる

CSS 文法

rotateY(angle)

技術的詳細

ブラウザのサポート

テーブルの数字は、この機能を完全にサポートする最初のブラウザのバージョンを示しています。

関連ページ

チュートリアル：CSS 3D 変換

参考：CSS transform 属性

参考：CSS rotate 属性

参考：CSS rotate() 函数

参考：CSS rotate3d() 函数

参考：CSS rotateX() 函数

参考：CSS rotateZ() 函数