回転させるCSS transform:rotateの中心軸とその変更方法

CSSではtransform: rotateを使うことで回転させ、斜めを表現することができます。

しかし、このtransform: rotateいったいどこが中心軸なのか？

回転transform:rotateの中心軸とその変更方法について説明します。

結論

中心軸は初期状態は対象のド真ん中です。
変更するには transform-origin:数字% 数字% と指定します。

以下で詳しく説明します。

基本

回転の角度の指定はtransform: rotate(数字deg)

回転の角度は
transform: rotate(数字deg)
と指定します。

degは角度の単位の「度」にあたります。
下記のように指定すると360度回転＝元の状態となります。

例
transform: rotate(360deg)

回転の中心軸の指定はtransform-origin:数字% 数字%

回転の中心軸は
transform-origin:数字% 数字%
と指定します。

左上を0%として
transform-origin:横の割合 縦の割合
を指定します。

例
transform-origin:100% 100%

回転軸transform-originの例

下記様々な例を挙げました。
マウスを写真に乗せると回転するので、中心軸を確認してみてください。

	transform-origin指定なし （初期状態は中心が軸）
	transform-origin:50% 50% （初期状態と同じく中心が軸）
	transform-origin:0 0 （左上が軸）
	transform-origin:100% 100% （右下が軸）
	transform-origin:0 50% （左中心が軸）
	transform-origin:50% 100% （下中心が軸）

まとめ

中心軸は初期状態は対象のド真ん中です。
変更するには transform-origin:数字% 数字% と指定します。

以上、回転transform:rotateの中心軸とその変更方法でした。