transform-matrixを使って、クリックした箇所を基準に拡大縮小する四角形をつくる 🔍

developer.mozilla.org

transform-matrixを使って、クリックした箇所を基準に2倍に拡大する四角形をつくりました。もう一度クリックすると元の大きさに戻ります。

DEMO

ソースコード

JavaScript

const rect = document.getElementById('rect');
let scale = 1;

rect.addEventListener('click', (evt) => {
  const size = 100;
  let matrixStyle = '1, 0, 0, 1, 0, 0';

  if (scale === 1) {
    scale = 2;
  } else {
    scale = 1;
  }

  let offsetRatioX = evt.offsetX / size;
  let offsetRatioY = evt.offsetY / size;

  const maxDiff = (scale * size - size) / 2;

    matrixStyle = `matrix(
      ${ scale },
      0,
      0,
      ${ scale },
      ${ maxDiff - maxDiff * 2 * offsetRatioX },
      ${ maxDiff - maxDiff * 2 * offsetRatioY }
    )`;

  rect.style.transform = matrixStyle;
});