【background-position】背景画像の配置位置
みいと
おじさんのWEBデザイン学習まとめ
transform-originプロパティを使用すると、transformプロパティでボックスを変形させるときの原点を設定することができます。
transform-originプロパティには、下記の値を指定できます。
transform-originプロパティの値は、半角スペースで区切って1〜3個設定できます。
1つ目が横方向の位置、2つ目が縦方向の位置、3つ目はz方向の位置の設定になります。
1つ目と2つ目の値が、キーワードで指定されている場合は順番が逆でも問題ありません。
値が1つのみの場合は、2つ目の値にcenterが指定された状態になります。
3つ目の値が指定されていない場合は、0pxが指定されていることになります。
初期値は50% 50%です。
使用頻度の高そうな指定方法を、以下にまとめます。
同じ設定のボックスを回転させていますが、原点の位置がずれると変形後の位置もずれてきます。
ボックスの左上を原点に指定する場合は、下記のような指定方法があります。
<div style="transform-origin: 0px 0px;transform: rotate(45deg); background-color: skyblue; width: 50px; height: 50px; margin: 30px;"></div>
ボックスの中央を原点に指定する場合は、下記のような指定方法があります。
<div style="transform-origin: 50% 50%;transform: rotate(45deg); background-color: skyblue; width: 50px; height: 50px; margin: 30px;"></div>
ボックスの右下を原点に指定する場合は、下記のような指定方法があります。
<div style="transform-origin: right bottom;transform: rotate(45deg); background-color: skyblue; width: 50px; height: 50px; margin: 30px;"></div>
今回はtransformプロパティで、ボックスを変形させるときの原点設定についてまとめました。
原点の位置で表示結果も変わってくるので、色々試してみるのがいいでしょう。