マンガでわかるホームページ作成

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の中心軸とその変更方法でした。

関連記事