【transform-origin】ボックス変形時の原点設定

transform-originプロパティでボックスの原点を設定する

transform-originプロパティを使用すると、transformプロパティでボックスを変形させるときの原点を設定することができます。

transform-originプロパティには、下記の値を指定できます。

• 単位付きの数値
• パーセンテージ
• top
• bottom
• center
• left
• right

transform-originプロパティの値の設定方法

transform-originプロパティの値は、半角スペースで区切って1〜3個設定できます。
1つ目が横方向の位置、2つ目が縦方向の位置、3つ目はz方向の位置の設定になります。

1つ目と2つ目の値が、キーワードで指定されている場合は順番が逆でも問題ありません。

値が1つのみの場合は、2つ目の値にcenterが指定された状態になります。
3つ目の値が指定されていない場合は、0pxが指定されていることになります。

初期値は50% 50%です。

使用頻度の高そうな指定方法を、以下にまとめます。

同じ設定のボックスを回転させていますが、原点の位置がずれると変形後の位置もずれてきます。

左上を原点に指定する

ボックスの左上を原点に指定する場合は、下記のような指定方法があります。

• 0px 0px
• 0% 0%
• top left

<div style="transform-origin: 0px 0px;transform: rotate(45deg); background-color: skyblue; width: 50px; height: 50px; margin: 30px;"></div>

中央を原点に指定する

ボックスの中央を原点に指定する場合は、下記のような指定方法があります。

• 50% 50%
• center center

<div style="transform-origin: 50% 50%;transform: rotate(45deg); background-color: skyblue; width: 50px; height: 50px; margin: 30px;"></div>

右下を原点に指定する

ボックスの右下を原点に指定する場合は、下記のような指定方法があります。

• 100% 100%
• right bottom

<div style="transform-origin: right bottom;transform: rotate(45deg); background-color: skyblue; width: 50px; height: 50px; margin: 30px;"></div>

ボックスの原点設定のまとめ

今回はtransformプロパティで、ボックスを変形させるときの原点設定についてまとめました。

原点の位置で表示結果も変わってくるので、色々試してみるのがいいでしょう。

みいと

TwitterContact

興味を持ったものをいろいろと勉強しています。