これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

草案
このページは完成していません。

CSSrotate プロパティは、 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() (2D 回転) 関数と等価です。
x, y, z 軸と角度値
該当する要素を回転する軸の名前 ("x", "y", "z") と、要素を貫いて回転する角度を指定する <angle> です。 rotateX()/rotateY()/rotateZ() (3D 回転) 関数と等価です。
ベクトルと角度値
要素を回転させたい直線を表す原点を中心としたベクトルを表す三つの数値 <number> と、要素を貫いて回転する角度を指定する <angle> です。 rotate3d() (3D 回転) 関数と等価です。
none
回転を適用しないことを表します。

形式文法

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

要素を隠す

<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あり

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
実験的
Chrome 完全対応 ありEdge 未対応 なしFirefox 完全対応 60
無効
完全対応 60
無効
無効 From version 60: this feature is behind the layout.css.individual-transform.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 未対応 なしFirefox Android 完全対応 60
無効
完全対応 60
無効
無効 From version 60: this feature is behind the layout.css.individual-transform.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
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 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,