CSS position absolute transform

Question

CSSを使った右下にdivを配置しました

<div style="width:100px;height:100px;position:absolute;bottom:0%;right:0%;background:red">
</div>

そこにtransformで付けて縮小すると赤色のボックスの上下左右余白が生まれます

<div style="transform:scale(0.5);width:100px;height:100px;position:absolute;bottom:0%;right:0%;background:red">
</div>

余白を生まさず縮小
または
右下にぴったり配置させる形にするにはどうしたらいいんでしょうか？

Answer 1

transform-origin で右下を指定するといいかと思います。
transform-origin - CSS: カスケーディングスタイルシート | MDN

Comments

[qwewq]

transform-originは知りませんでした

このような形で自己解決できました
<div style="width:100px;height:100px;position:absolute;bottom:0%;right:0%;background:red">
<div style="transform:scale(0.5) translateX(49%) translateY(49%);width:100%;height:100%;position:absolute;bottom:0%;right:0%;background:blue">
</div>
</div>

[Lhankor_Mhy]

ご解決されて何よりです。

お手数ですが、自己解決でしたら、BAを解除してご自分で回答を記述してください。