CSS Scale动画还会将图像向左移动吗? [英] CSS Scale animation also moves image to left?

问题描述

我试图制作一个使用CSS动画的图片库，但出现了一些奇怪的效果.我有一个较小的缩略图图像开始，当我将鼠标悬停在它上面时，我希望它缩放到两倍大小.该部分有效，但也使其向左移动，最终移到屏幕边缘.我应该怎么做才能解决它?

I'm trying to make an image gallery that uses CSS animations, but I'm having some weird effects come up. I have a smaller thumbnail image to start, and I want it to scale to twice the size when I hover over it. That part works, but it also makes it move to the left, and it ends up going over the edge of the screen. What should I do to fix it?

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

演示

推荐答案

它没有向左移动.但是，左边的 edge 正在移动，右边的也在移动.因为您的内容是左对齐的，所以它似乎向左移动.

It's not moving to the left. The left edge is moving, however, as is the right. Because your content is left-aligned, it appears to move left.

演示

您可以设置变换原点:

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

演示

还可以考虑简单地使用 不太引人注目的变换 :

Also consider simply using a less dramatic transform:

transform: scale(1.1);

这篇关于CSS Scale动画还会将图像向左移动吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！