transform: scale()で要素が重なってしまったときのmarginのとり方

Chromeでは10px未満のときにfont-sizeが適用されなくなる事象が発生する。
※ ユーザ環境設定に依存するのですべてのChromeではない

そのときの対処法としてtransform: scale()を使うことがある。しかし、そこには落とし穴がある。下図のように並べた要素のボックスサイズが拡大/縮小されずに要素が重なってしまうのだ。

対処法は以下のとおり。

重なった要素をmarginで調整する

<div class="box">scale(1)</div>
<div class="box">scale(1.3)</div>
<div class="box">scale(1.5)</div>
<div class="box">scale(1.3)</div>
<div class="box">scale(1)</div>

.box {
 display: inline-block;
 width: 100px;
 height: 100px;
 border: 2px solid;
 transform-origin: top left;
}

.box:nth-child(1),
.box:nth-child(5) {
  transform: scale(1);
}
.box:nth-child(2),
.box:nth-child(4) {
  transform: scale(1.3);
  margin-right: 30px;
  margin-bottom: 30px;
}
.box:nth-child(3) {
  transform: scale(1.5);
  margin-right: 50px;
  margin-bottom: 50px;
}

scaleで指定された倍率分のmarginを右と下に指定することで、拡大/縮小された要素も綺麗に並べることができる。

参考サイト

• scale() - CSS: カスケーディングスタイルシート | MDN

以上

written by @bc_rikko