CSS の rotate
プロパティは、 transform
とは個別に独立して回転変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 transform
の値で変形関数を指定する実際の順序を覚えておく手間を軽減します。
構文
/* キーワード値 */ rotate: none; /* 角度値 */ rotate: 90deg; rotate: 0.25turn; rotate: 1.57rad; /* x, y, z 軸名と角度 */ rotate: x 90deg; rotate: y 0.25turn; rotate: z 1.57rad; /* ベクトルと角度の値 */ rotate: 1 1 1 90deg;
値
- 角度値
<angle>
で、 z 軸の周囲を該当する要素を貫いて回転させる角度を指定します。rotate()
(2次元回転) 関数と等価です。- x, y, z 軸と角度値
- 該当する要素を回転する軸の名前 (
"x"
, "y
", "z"
) と、要素を貫いて回転する角度を指定する<angle>
です。rotateX()
/rotateY()
/rotateZ()
(3次元回転) 関数と等価です。 - ベクトルと角度値
- 要素を回転させたい直線を表す原点を中心としたベクトルを表す三つの数値
<number>
と、要素を貫いて回転する角度を指定する<angle>
です。rotate3d()
(3次元回転) 関数と等価です。 none
- 回転を適用しないことを表します。
形式文法
none | [ x | y | z | <number>{3} ]? && <angle>
例
HTML
<div> <p class="rotate">Rotation</p> </div>
CSS
* { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; }
.rotate { transition: rotate 1s; } div:hover .rotate { rotate: 1 -0.5 1 180deg; }
結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Transforms Level 2 individual transforms の定義 |
編集者草案 | 初回定義 |
初期値 | none |
---|---|
適用対象 | 変形可能要素 |
継承 | なし |
メディア | 視覚 |
計算値 | 指定値 |
アニメーションの種類 | transform |
正規順序 | 構文通り |
Creates stacking context | あり |
ブラウザー実装状況
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
デスクトップ | モバイル | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
基本対応 | Chrome 完全対応 あり | Edge 未対応 なし | Firefox
完全対応
60
| IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 未対応 なし | Firefox Android
完全対応
60
| Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 完全対応 あり |
x, y, or z axis name plus angle value | Chrome 完全対応 あり | Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 未対応 なし | Firefox Android 未対応 なし | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 完全対応 あり |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実験的。動作が変更される可能性があります。
- 実験的。動作が変更される可能性があります。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。