transform scale使用時にオリジナルのボックスサイズを縮小する

css transform scaleとは

cssのtransform: scaleを使うと要素を任意の倍率に縮小・拡大できる

developer.mozilla.org

ただしボックスサイズには影響を与えないのでzoomと違って縮小した場合に元のボックスサイズが維持される

前提

縦横サイズが固定などでわかっていること

やり方

対策としては小さくした分マイナスマージンを入れてボックスを小さくしてやる必要がある

<div class="half-container">
    <Component />
</div>

.harf-container {
    /* 要素の大きさを半分に */
    transform: scale(0.5);
    /* 縮小したものを左上に */
    transform-origin: top left;
    /* 右側のspaceを打ち消す */
    margin-right: calc(200px * (1 - 0.5) * -1);
    margin-bottom: calc(200px * (1 - 0.5) * -1);
}

ちなみに

ボックスサイズがわかっていないパターン、つまりcalc(100%)でやろうと思ったがうまくやる方法が思いつかなかった… 検索しているとjsでサイズを取ったりするパターンなどもあるみたいだが、そこまで複雑にしたくなかったのでcssだけでできるやり方として上記を使うことにした。

ちなみにサイズに関しては仕事で使っているtailwindだと、themeに定義しているのでtheme()で取り出す事ができるの面白かった

tailwindcss.com