rotate()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
試してみましょう
transform: rotate(0);
transform: rotate(90deg);
transform: rotate(-0.25turn);
transform: rotate(3.142rad);
要素が回転する中心となる特定の点 — 前述 — は、変換原点とも呼ばれます。既定では要素の中央ですが、 transform-origin
プロパティを使用して独自の座標変換原点を設定することができます。
構文
値
例
基本的な例
HTML
html
Normal
Rotated
CSS
css
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.rotated {
transform: rotate(45deg); /* rotateZ(45deg) と等価 */
background-color: pink;
}
結果
回転とその他の座標変換の組み合わせ
複数の座標変換を要素に適用したい場合は、座標変換を指定する順序に気を付けてください。例えば、平行移動前に回転すると、平行移動によって回転の軸が変わってしまいます。
HTML
html
Normal
Rotated
Rotated + Translated
Translated + Rotated
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
プロパティrotate3d()