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>

Demo

Answer 1

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

Demo

您可以设置变换原点：

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

Demo

还可以考虑使用less dramatic transform。

Answer 2

正如伊舍伍德所描述的那样，错误是由于.zoom占据了整个宽度，而不仅仅是可见部分。

另一个解决方案是大小.zoom，这样它只占用你想要的空间量，在这种情况下是图像的宽度。你可以通过给它一个明确的宽度来做到这一点。

.zoom {
    transition:1s ease-in-out;
    width:200px;
}

但是，由于元素仍然从中间转换，因此它仍然会在视口之外，因为它非常接近。要解决此问题，您可以使用transform-origin:left或在任一侧提供足够的空间，以便缩放版本不会超出视口。我在this demo中使用了填充。

另一个注意事项：将事物扩展到默认值scale(1)以上并不好，因为它们因为太大而变得模糊。因此，您可以将元素的大小调整为width:400px;并默认为transform:scale(.5)，并在悬停时转到transform:scale(1)并删除此问题。

Demo with all the changes

另请注意，嵌入式样式错误，几乎所有时间都应使用外部样式表。

Answer 3

或者如果您需要不可变的图像区域，可以尝试添加overflow：hidden container。

对于此示例，请在缩放类之前使用类内容：

.content{
    overflow:hidden;
}

http://jsfiddle.net/3b7afm7z/6/

并且您可以将两者结合起来，对于此示例条目：

.content{
    overflow:hidden;
}
.zoom:hover {
    transform:scale(2);
    transform-origin: left bottom;
}

http://jsfiddle.net/3b7afm7z/9

CSS Scale动画还将图像向左移动？

3 个答案: