最简单的方法是将CSS***hover***替换为***active***，但是一旦图像扩展，就没有办法再次缩小到正常状态...

div.container img:active { transform: scale(3.0) rotate(-10deg); }

除非你在它的主CSS中添加了紧缩。

div.container table td img { width:40%; transform: scale(1) rotate(0deg);}

另外，JS来拯救你，你可以很容易地直接在你的HTML元素上添加这样的功能。

onmousedown="this.style.transform='scale(3.0) rotate(-10deg)';" 

onmouseout="this.style.transform='scale(1) rotate(0deg)';"

所以最终的结果会是这样的...

<img onmousedown="this.style.transform='scale(3.0) rotate(-10deg)';" onmouseout="this.style.transform='scale(1) rotate(0deg)';" src="https://i.postimg.cc/Tw4H40yY/thumbnail-27d67c5eb4-221900-blackhemtag-flat-221900.jpg">

这两种方法都很好，所以选择你喜欢的方法。CSS看起来最简单。

但是，我不相信CSS有跟踪点击事件的方法。
事实上，CSS * do * 有such a method。它并不完美，但在这种情况下，它可能对你有用。
首先，将每个<img> Package 在一个<label>中，并在它之前放置一个<input type="checkbox">：

<label>
  <input type="checkbox">
  <img src="https://i.postimg.cc/Tw4H40yY/thumbnail-27d67c5eb4-221900-blackhemtag-flat-221900.jpg">
</label>

然后，将:hover规则更改为：

input:checked + img {
  transform: scale(3.0) rotate(-10deg);
}

请记住隐藏这些复选框：

input[type="checkbox"] {
  display: none;
}

一旦复选框通过相应的<label>成为:checked，则位于其旁边的<img>将被转换。
试试看：

input[type="checkbox"] {
  display: none;
}

input:checked + img {
  transform: scale(3.0) rotate(-10deg);
}

/* Original styles */

.container {
  overflow: auto;
  height: 800px;
}

.container img {
  transition: all 1s;
  box-shadow: -3px 1px 5px rgba(0, 0, 0, .5);
}

div.container table {
  margin-top: 85px;
}

div.container table th,
div.container table td:first-child,
div.container table td:first-child + td,
div.container table tr:first-child + tr,
div.container table tr:first-child + tr td {
  text-align: center;
}

div.container table td img {
  width: 40%;
}

<div class="container">
  <table border="0">
    <tr>
      <th width="20%">Image Width</th>
      <th width="20%">Image Height</th>
      <th width="20%">Location</th>
      <th width="20%">Internal Notes</th>
      <th width="20%">External Notes</th>
    </tr>
    <tr>
      <td>10.5"</td>
      <td>12.75"</td>
      <td>Left Hip</td>
      <td>Heat Transfer - 49/51</td>
      <td>Fine details in artwork will diminish.</td>
    </tr>
    <tr>
      <td></td>
      <td colspan="2">
        <label>
          <input type="checkbox">
          <img src="https://i.postimg.cc/Tw4H40yY/thumbnail-27d67c5eb4-221900-blackhemtag-flat-221900.jpg">
        </label>
      </td>
      <td colspan="2">
        <label>
          <input type="checkbox">
          <img src="https://i.postimg.cc/VLRHyz0V/thumbnail-32136cc21e-221900-blackhemtag-thumb-221900.jpg">
        </label>
      </td>
    </tr>
  </table>
</div>

您可以在特定类上设置transform，而不是:hover伪类。

div.container img.transformed { transform: scale(3.0) rotate(-10deg) }

然后，您可以将单击事件侦听器附加到容器，该容器在单击图像时添加该类。

document.querySelector('.container').addEventListener('click', e => {
    if (e.target.matches('img')) e.target.classList.add('transformed');
});

您可以使用.classList.toggle而不是.add在单击已转换的图像时删除转换。