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

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

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
適用対象変形可能要素
継承不可
メディアvisual
計算値指定値
アニメーションの種類transform
正規順序per grammar
Creates stacking context継承する

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり なし601 なし なし なし
x, y, or z axis name plus angle value あり なし なし なし なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり なし601 なし なし あり
x, y, or z axis name plus angle value あり あり なし なし なし なし あり

1. 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.

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

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