CSSの「transform:scale()」を使って要素を小さくしたときに元の大きさ分の余白ができちゃうのでそれを潰したいときの備忘録

CSSだけで余白を潰す方法

まずはデモ

HTML

<div class="wrap">
	<div class="scale-element">テキスト</div>
</div>

SCSS

$width: 100px;
$height: 100px;
$rate: 0.5;
.wrap{
	height:$height * $rate;
	width:$width * $rate;
}
.scale-element{
	background:white;
	border:solid 1px black;
	height:$height;
	width:$width;
	transform-origin:left top;
	transform: scale($rate);
}

やってることはシンプルで親と子要素(scale対象)を用意してscaleした後のサイズを「子要素のサイズ × scale値」で求めて、親要素に反映し余白を潰してるだけ

一つ注意しないといけないのが%みたいに親要素に依存するような相対単位を使うと上手くいかない
というのも、今回の例だと「100px(子要素のサイズ) × 0.5(scale値)」でscale後のサイズが50pxになるんだけど、scale対象の子要素で幅高さ100%を使うと四辺が25pxになってしまう(上記のコードでは50pxになる)

要するに、親要素にscale後のサイズ(50px)を指定→子要素が親要素(50px)を対象にscale(0.5)→四辺が25pxになる、ということ
%のような相対単位を指定すると親要素基準になってしまうのでpxなどの絶対単位を使う必要性がある