rotate()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
rotate() は CSS の関数で、要素を二次元平面上の特定の点を中心に、形を崩さずに回転させる座標変換を定義します。結果は <transform-function> データ型になります。
試してみましょう
transform: rotate(0); transform: rotate(90deg); transform: rotate(-0.25turn); transform: rotate(3.142rad); <section id="default-example"> <img class="transition-all" id="example-element" src="/shared-assets/images/examples/firefox-logo.svg" width="200" /> </section> 要素が回転する中心となる特定の点 — 前述 — は、変換原点とも呼ばれます。既定では要素の中央ですが、 transform-origin プロパティを使用して独自の座標変換原点を設定することができます。
構文
rotate() で生成される回転の量は、 <angle> で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。180 度で回転したものは点対称と呼ばれます。
css
rotate(a) 値
例
基本的な例
HTML
html
<div>Normal</div> <div class="rotated">Rotated</div> CSS
css
div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotate(45deg); /* rotateZ(45deg) と等価 */ background-color: pink; } 結果
回転とその他の座標変換の組み合わせ
複数の座標変換を要素に適用したい場合は、座標変換を指定する順序に気を付けてください。例えば、平行移動前に回転すると、平行移動によって回転の軸が変わってしまいます。
HTML
html
<div>Normal</div> <div class="rotate">Rotated</div> <div class="rotate-translate">Rotated + Translated</div> <div class="translate-rotate">Translated + Rotated</div> CSS
css
div { position: absolute; left: 40px; top: 40px; width: 100px; height: 100px; background-color: lightgray; } .rotate { background-color: transparent; outline: 2px dashed; transform: rotate(45deg); } .rotate-translate { background-color: pink; transform: rotate(45deg) translateX(180px); } .translate-rotate { background-color: gold; transform: translateX(180px) rotate(45deg); } 結果
仕様書
| Specification |
|---|
| CSS Transforms Module Level 1 # funcdef-transform-rotate |
ブラウザーの互換性
関連情報
transformプロパティrotateプロパティ<transform-function>rotate3d()
