HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>gesture transform</title>
  <style>
    #stage { height: 220px; border: 2px solid #333; touch-action: none; display: grid; place-items: center; }
    #card { width: 120px; height: 120px; background: #4f46e5; color: #fff; display: grid; place-items: center; }
  </style>
</head>
<body>
  <div id="stage">
    <div id="card" data-scale="1">Pinch me</div>
  </div>
  <script>
    var stage = document.getElementById("stage");
    var card = document.getElementById("card");
    var base = 1;
    stage.addEventListener("gesturestart", function (event) {
      event.preventDefault();
      base = Number(card.dataset.scale || 1);
    });
    stage.addEventListener("gesturechange", function (event) {
      event.preventDefault();
      var next = base * event.scale;
      card.style.transform = "scale(" + next + ")";
      card.dataset.live = String(next);
    });
    stage.addEventListener("gestureend", function () {
      card.dataset.scale = card.dataset.live || card.dataset.scale || "1";
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Element gesturechange — CSS transform (Try It)