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() 関数