CSS Scale动画还将图像移动到左边？

Question

我正在尝试制作一个使用CSS动画的图库,但我有一些奇怪的效果出现了.我有一个较小的缩略图来开始,我希望它在我悬停在它上面时缩放到两倍大小.该部分有效,但它也会向左移动,并最终越过屏幕边缘.我该怎么做才能解决这个问题？

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

<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>

演示

Answer 1

它没有向左移动.然而,左边缘正在移动,正如右边一样.由于您的内容是左对齐的,因此它似乎向左移动.

演示

您可以设置变换原点:

.zoom {
    transition:1s ease-in-out;
    transform-origin: left top;
    background: pink;
}

演示

还要考虑使用不那么引人注目的变换.