CSS rotate 属性

定義と使用方法

rotate 属性は要素を回転するのに使用できます。

rotate 属性は、要素が z 軸に沿って時計回りに回転する度数を示す値を定義します。x 軸、y 軸、または他の方法で要素を回転するには、それに応じた定義を行わなければなりません。

rotate 属性の値は角度、軸名 + 角度、または3つの値 + 角度のいずれかです。

  • 角度のみが提供された場合、要素は z 軸に沿って時計回りに回転します。
  • 軸名 + 角度が提供された場合、要素は指定された軸に沿って時計回りに回転します。
  • 3つの値 + 角度が提供された場合、これらの3つの値はベクトルを定義し、要素はそのベクトルに沿って回転します。

よりよく理解するために、 rotate 属性について詳しくは、デモ。

注意：要素を回転するもう一つの技術は、 CSS rotate() 函数 の CSS transform 属性

例

例 1

要素の回転を変更します：

div {
  rotate: 30deg;
}

自分で試してみてください

例 2

次に、 rotate ベクトルと角度が属性として設定された場合、要素はそのベクトルに沿って回転します。

ここでは、ベクトルは二次元平面の [1 1 0] で、x 和 y 座標を持っており、それから 60 度に回転します：

div {
  rotate: 1 1 0 60deg;
}

自分で試してみてください

CSS 文法

rotate: axis angle|initial|inherit;

属性値

値 説明
axis

オプションです。設定されていない場合、デフォルト値は z 軸です。要素がその周りに回転する軸を定義します。可能な値：

  • x
  • y
  • z
angle

要素の回転度を定義します。可能な単位：

  • deg（度）
  • rad（ラジアン）
  • turn（周）
vector angle

これらの3つの数字は、ベクトルを定義し、要素がそのベクトルに沿って回転します。

これらの3つの数字は、ベクトルの x、y、z 座標です。

最後の値は回転角度です。

可能な値：

number number number angle
初期値 この属性をデフォルト値に設定します。参照してください： 初期値。
継承 親要素からこの属性を継承します。参照してください： 継承。

技術的詳細

デフォルト値： なし
継承性： いいえ
アニメーション作成： サポートしています。参照してください：アニメーション関連属性。
バージョン： CSS3
JavaScript 文法： object.style.rotate="-120deg"

ブラウザのサポート

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

Chrome Edge Firefox Safari Opera
104 104 72 14.1 90

関連ページ

教程：CSS 2D 変換

教程：CSS 3D 变换

参考：CSS scale 属性

参考：CSS translate 属性