コース推薦:

CSS rotateX() 関数

定義と使用方法 rotateX() CSS

rotateX() 関数は、要素がx軸(水平方向)に沿って3D回転する方法を定義します。 transform 属性で使用しています。

インスタンス

例1

を使用して rotateX() x軸(水平方向)に沿って複数の<div>要素を回転します:

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

実際に試してみる

例2

を使用して rotateX() x軸(水平方向)に沿って画像を回転します:

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

実際に試してみる

CSS 语法

rotateX(angle)
説明
angle

必須。指定する回転角度。可能な単位:

  • deg(度)
  • rad(弧度)
  • turn(円)

技術的な詳細

バージョン: CSS Transforms モジュール レベル 2

ブラウザのサポート

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

クローム エッジ ファイアフォックス サファリ オペラ
12 12 10 4 15

関連ページ

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

参照:CSS transform 属性

参照:CSS rotate 属性

参照:CSS rotate() 関数

参照:CSS rotate3d() 関数

参照:CSS rotateY() 関数

参照:CSS rotateZ() 関数