为什么我的Transform：Scale()属性会将图像向左移动？

我正在尝试制作一个使用css动画的图片库，但出现了一些奇怪的效果。我有一个较小的缩略图开始，我希望它缩放到两倍大小时，我悬停在它上面。这部分可以，但它也会使它向左移动，最终会越过屏幕的边缘。我应该做些什么来修复它？

数据-lang="js"数据-隐藏="假"数据-控制台="假"数据-巴贝尔="假">

.zoom {
    transition:1s ease-in-out;
}
.zoom:hover {
    transform:scale(2);
}

<div class="content">
    <div class="zoom">
        <img alt="Paperplane" src="Paperplane.png" style="width: 200px; height: 62px">
        <br> <span class="caption">A paper plane</span>
    </div>
</div>

JSFIddle Demo

---

解决方案

它没有向左移动。但是，左侧边缘正在移动，右侧也是如此。因为您的内容是左对齐的，所以它看起来会向左移动。这个彩色演示很好地展示了这一点：

数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假">

.zoom {
  transition: 1s ease-in-out;
  background: pink;
}

.zoom:hover {
  transform: scale(2);
}

<div class="content">
  <div class="zoom">
    <img alt="Paperplane" src="https://via.placeholder.com/200" style="width: 200px; height: 62px" />
    <br /> <span class="caption">A paper plane</span>

  </div>
</div>

您可以设置转换原点：

transform-origin: left top;

数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假">

.zoom {
  transition: 1s ease-in-out;
  background: pink;
}

.zoom:hover {
  transform: scale(2);
  transform-origin: left top;
}

<div class="content">
  <div class="zoom">
    <img alt="Paperplane" src="https://via.placeholder.com/200" style="width: 200px; height: 62px" />
    <br /> <span class="caption">A paper plane</span>

  </div>
</div>

还可以考虑简单地使用不那么戏剧性的转换：

transform: scale(1.1);

数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假">

.zoom {
  transition: 1s ease-in-out;
  background: pink;
}

.zoom:hover {
  transform: scale(1.1);
}

<div class="content">
  <div class="zoom">
    <img alt="Paperplane" src="https://via.placeholder.com/200" style="width: 200px; height: 62px" />
    <br /> <span class="caption">A paper plane</span>

  </div>
</div>