回転の支点はどこ？transform-originで中央と左上を比べよう

カードを45度に回したら、思った場所から離れて見える。同じ角度なのに、中央を軸に回す場合と、左上を留めて回す場合では、見える位置が変わるよ。そんなときに確認したいのが、回転の支点を決めるtransform-originだよ。

このページでは、1枚の長方形のカードで中央と左上の支点を切り替え、回転角度との役割の違いを確かめる。必要なのはブラウザだけ。ページ内の作例は、選択肢を変えて表示を比べる小さな実験だよ。

回す角度と、支点を別々に指定する

.card {
  transform: rotate(45deg);
  transform-origin: center;
}

transformは要素の見た目に変換を加えるプロパティで、rotate()は平面上の回転を指定する関数。45degは45度という角度だよ。回転の支点は、別のプロパティであるtransform-originで指定する。

今回扱う通常のHTML要素では、支点の初期値は中央。2次元の指定ならcenterと50% 50%で同じ中央を表せる。省略していても、いつも左上を軸に回っているわけではないんだ。

ここでは、ほかの変換と組み合わせない長方形のHTMLカードに範囲を絞る。SVGの要素には初期値が異なる場合があるので、同じ前提で読み替えないでね。

左上を支点にするときはleft top

.card {
  transform: rotate(45deg);
  transform-origin: left top;
}

left topは、カードの左上を支点にする指定。横方向のleftは0%、縦方向のtopも0%に対応するので、0% 0%とも書けるよ。中央と左上のどちらでも、回す角度は同じ45度のままだ。

支点は、カードを回すときにピンで留める場所、と考えると想像しやすい。中央に留めれば中央の周りを回り、左上に留めれば左上を保ってほかの部分が回る。支点を変えたときにカードの見える位置も変わるのは、この回り方の違いによるものだよ。

ここでいう左上は、回転前のカードを基準にした場所。回転後に画面の上でもっとも左上に見える部分、という意味ではない。斜めのカードの端だけを追うと迷いやすいので、先に支点の点を見つけてから、固定の枠と比べてみよう。

ただし、0度では回転していない。そこで支点だけを変えても、カードの見た目の位置は変わらない。まず0度で比べると、支点の指定とカードの位置指定を分けて考えやすくなる。

枠と支点の印を見ながら比べよう

作例には、回転前の場所を示す固定の枠、色の付いたカード、支点の点がある。枠は比較用に置いた目印で、カードと一緒には回らないよ。

1. 支点をcenter、角度を0にする。カードと固定の枠が重なる状態を見る。
2. 角度を0度にしたまま、支点をtop-leftへ切り替える。点は左上へ移るが、カードは同じ場所に見えるはずだよ。
3. 角度を45へ変える。左上の点を支点に、カードが傾く様子を見る。
4. 45度のまま支点をcenterへ戻し、固定の枠に対してカードがどこに見えるか比べる。
5. 角度を90にも切り替える。最後は「最初から試す」で中央・0度へ戻す。

作例のtop-leftは選択肢の名前で、適用するCSSはtransform-origin: left top。見た目の名前と、実際に書く値を対応させておこう。

測定の長方形は、カードの辺とは分けて読む

下に出る測定値は、回転後のカード全体を包む、画面の縦横に沿った長方形の位置と大きさだよ。斜めになったカードの辺そのものの長さを表示しているわけではない。角度を変えるときは、この長方形と色の付いたカードの両方を見ると分かりやすい。

思った違いが出ないときは、まず角度が0度のままになっていないか確認する。次に支点と角度を一つずつ変えてみよう。自分のCSSで試す場合も、transform-originの値とrotate()の角度を別々に確認すると、どちらを直すか決めやすくなる。

カードを置く位置を調整したい場面でも、最初に支点を決めておくと比較しやすいよ。試す途中で支点と角度を同時に変えると、どの指定で見える位置が変わったのか追いにくくなる。元の状態へ戻して、ひとつずつ変更する順番を大切にしよう。

2026年10月29日にMDNの説明を確認した。作例では、支点と3つの角度の組み合わせ、回転前の固定枠と支点の座標、測定表示、リセットを319px・1280px幅のブラウザで検証したよ。見た目の移動と周囲の配置も比較したい場合は、relative・transform・marginの違いへ進んでみてね。