CSS Reference

rotate

回転を指定する

rotate プロパティは、transform プロパティで使用する、rotate() 関数などをプロパティとして独立させたものです。要素を回転させることができます。

指定可能な値の定義は下記の通りです。

none | <angle> | [ x | y | z | <number>{3} ] && <angle>

つまり、下記、いずれかの指定が可能です。

none キーワード

回転を適用しません。

rotate: none;

<angle> を単体で指定

2Dでの回転を指定します。<angle> は回転する角度で、deg や rad などの単位を使用して指定します。

rotate: 45deg; /* 45度回転（時計回り） */
rotate: -90deg; /* -90度（反時計回りに90度）回転 */
rotate: 0.5turn; /* 180度回転 */

[ x | y | z | <number>{3} ] && <angle> 形式の指定

3D空間での回転軸を指定して回転させます。

x, y, z を使用した場合は下記のような指定が可能です。回転させたい軸と、<angle> と組み合わせて指定します。

rotate: x 45deg; /* x 軸を中心に45度回転 */
rotate: y 90deg; /* y 軸を中心に90度回転 */
rotate: z 180deg; /* z 軸を中心に180度回転 */

つまり、transform プロパティにおける、rotateX()、rotateY()、rotateZ() 関数と同様の動作となります。

<number>{3} は、3つの数値で任意のベクトル方向を指定し、それを軸に指定した角度（<angle>）で回転させます。

rotate: 1 0 0 45deg; /* [1, 0, 0] というベクトル方向で45度回転 */
rotate: 0 1 0 90deg; /* [0, 1, 0] というベクトル方向で90度回転 */
rotate: 0 0 1 30deg; /* [0, 0, 1] というベクトル方向で30度回転 */

上記の指定は、それぞれ下記と同等となります。

rotate: x 45deg;
rotate: y 90deg;
rotate: z 30deg;

下記のように複合的なベクトルが指定された場合は、正規化されて使用されます。

rotate: 1 1 0 60deg;
rotate: 1 0 1 120deg;
rotate: 1.5 0.5 0 30deg;

つまり、transform プロパティにおける、rotate3d() 関数と同様の動作となります。

rotateの仕様

初期値
  • none
対象となる要素
  • 変形可能な要素
継承
  • なし

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するプロパティ

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome