translate / rotate / scale — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 `translate` / `rotate` / `scale` vs one shared `transform`</h1>
    <p class="pg-sub">
      Drag the slider to move both cards, then flip the hover switch. One card writes
      <code>transform</code> for both drag and hover and loses the hover effect the moment it's
      been dragged. The other gives drag its own <code>translate</code> and hover its own
      <code>scale</code> — so both always apply.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="field">
        <label class="ctl-label" for="pos">Drag position — moves both cards right</label>
        <input type="range" id="pos" min="0" max="140" value="0" />
      </div>
      <div class="btn-row" style="margin-top:10px">
        <label class="toggle">
          <input type="checkbox" id="hover" /><span class="switch"></span>
          <span>simulate hovering both cards</span>
        </label>
      </div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="drag-then-hover">Worked example: drag, then hover</button>
        <button class="btn ghost sm" id="reset">Reset</button>
      </div>
    </div>

<div class="cards">
      <div class="panel">
        <div class="panel-label"><span class="n">2</span> One shared <code>transform</code> (the bug)</div>
        <div class="stage">
          <div class="card shorthand" id="cardA">transform: translate() + hover: scale()</div>
        </div>
        <div class="status" id="statusA" style="margin-top:12px">
          <span class="dot info" id="dotA"></span><span id="statusTextA">Move the slider, then flip the hover switch.</span>
        </div>
        <p class="hint">JS sets <code>card.style.transform = "translate(...)"</code>. Once it does, the
          <code>:hover { transform: scale(1.12) }</code> rule has nowhere left to write — it still
          matches, it just can't apply.</p>
      </div>

<div class="panel">
        <div class="panel-label"><span class="n">3</span> Individual properties (the fix)</div>
        <div class="stage">
          <div class="card individual" id="cardB">translate: ... + hover: scale: ...</div>
        </div>
        <div class="status" id="statusB" style="margin-top:12px">
          <span class="dot info" id="dotB"></span><span id="statusTextB">Move the slider, then flip the hover switch.</span>
        </div>
        <p class="hint">JS sets only <code>card.style.translate</code>. CSS's
          <code>:hover { scale: 1.12 }</code> is a <em>different property</em>, so it keeps applying
          no matter where the card has been dragged.</p>
      </div>
    </div>

<div class="panel legend">
      <div class="panel-label"><span class="n">4</span> What each card is running right now</div>
      <div class="code" id="codeOut">—</div>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.