Rotate プロパティ

最終更新：2026-09-13

rotate Rotate プロパティ

rotate プロパティは、指定した軸を中心に要素を 2D または 3D 空間で回転させる個別変換プロパティです。独立したプロパティとしては、translate や scale などの他の変換と分けて制御でき、特に回転角度を単独でアニメーションさせたい場合に便利です。

カテゴリ
初期値	none
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

rotate: none | <angle> | [ x | y | z | <number>{3} ] <angle>;

⚙️ 値

値	タイプ	説明
`none`	キーワード	回転なし
`<angle>`	タイプ	回転の角度

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
rotate	✓ v57	✓ v12	✓ v52	✓ v10.1	✓ v44
すべての主要ブラウザーでサポート

ヒント： 軸が指定されていない場合、要素は Z 軸（画面に垂直）を中心に回転します。x、y、z 軸、またはカスタムベクトルを指定して 3D 回転を行えます。

ヒント： 軸の正の方向から見たとき、正の値は時計回りに、負の値は反時計回りに回転します。

❓ よくある質問

Q要素を連続して回転させるのではなく、左右に揺らすにはどうすればよいですか？

Aアニメーションを両方向に交互に再生します。animation-direction: alternate を使い、2 つのキーフレームを書きます。たとえば from フレームで rotate: -10deg、to フレームで rotate: 10deg とします。to フレームだけを書いた場合、0% フレームは自動的に要素の初期状態が使われます。JavaScript でクラスを切り替え、transition と組み合わせることもできます。

Qrotate プロパティは CSS の transform: rotate() と同じですか？

A見た目は完全に同一で、どちらも指定した軸を中心に回転します。違いは、独立した rotate プロパティなら transform 内にすでに存在する translate、scale、その他の変換に影響を与えずに単独でアニメーションできる点で、各次元を個別に制御するのに便利です。transform: rotate() は他の transform 関数と同じリストに書く必要があり、リストの順序は変更時に影響します。

Qrotate はどのような回転軸に対応していますか？X 軸や Y 軸を中心に回転させるにはどうすればよいですか？

A軸を書かない場合、回転はデフォルトで Z 軸（画面に垂直）となり、rotateZ と同等です。X 軸には rotate: x 45deg、Y 軸には rotate: y 45deg、または rotate: 1 1 0 45deg のようなカスタムベクトルを使います。X または Y 軸を中心とした回転では、実際の奥行きを見るために親要素に perspective が必要です。

Qrotate は負の角度や 360 度を超える角度に対応していますか？

Aはい。rotate: -45deg は反時計回りに 45 度回転し、360deg を超える値（720deg など）はアニメーション中に 2 回転分の回転として表示されます。角度の単位は deg、grad、rad、turn に対応しており、0.25turn は 90deg に等しくなります。静的スタイルでは 360deg と 0deg は同じように見えますが、アニメーションでは回転全体が描画される点に注意してください。