如何修复变换比例上的模糊图像

Question

当我将 transform: scale(1.1); 悬停在某些元素上时，图像变得模糊。如何修复此错误？

示例

Answer 1

试试这个，对我来说效果很好！

img {
    -webkit-backface-visibility: hidden; 
    -ms-transform: translateZ(0); /* IE 9 */
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
    transform: translateZ(0);
}

Answer 2

长话短说；博士 transform: scale 实际上是在缩放原始图像，因为您将其留给浏览器的渲染引擎来确定应该放在那里的内容，所以您得到了一个模糊的图像。尝试

img {
transform: scale(.9)    
}

img:hover {
transform: scale(1)
}

Aaron Sibler answered the question for me.

I just experienced this riddle. In your example, you’ll need to transform img DOWN something like “transform: scale(0.7)” and then scale UP to the images native dimensions on hover like “transform: scale(1.0)”

The scale value is relative to the original image’s dimensions – not their current dimensions on screen so a scale of 1 always equals the original image’s dimensions.

I’ve used this here;

http://meetaaronsilber.com/experiments/css3imgpop/index.html

Answer 3

我遇到了 SVG 缩放和模糊图像的问题。我将背景图像放大到 4.5，放大时图像变得非常模糊。我读到您可以先缩小 transform: scale(0.7)，然后再放大到 transform: scale(1.0)。就我而言，这意味着对我的动画进行大量重建。我有一个非常复杂的动画，具有多个比例和变换等。

我只是保持原样并添加了一个伪比例宽度。然后浏览器似乎重新渲染每一帧，但由于宽度实际上并没有改变，你仍然可以使用 transform: scale(x.x) 进行缩放，您将获得非常清晰的图像。

也许有人可以证实这一点。这是我的代码。在我的例子中，图像是 86px 宽，它放大到初始值的 4.5 倍。

<div class="overall-scale">
 <div class="image-scale"></div>
</div>

@keyframes overall-scale {
0% {
    transform: scale(1);
}

100% {
    transform: scale(4.5);
}
}

@keyframes image-scale {
0% {
    width: 86px;
}

100% {
    width: 86px;
}
}

希望这对您有所帮助，我的解释是有道理的。

如果这对您不起作用，请发表评论。

Answer 4

我已经阅读了所有评论，并尝试了人们建议的所有解决方案。但除了旋转（360 度）之外，没有什么是真正好的。一切，除了这一个在图像上结结巴巴，或者一开始它们变得太模糊了。但是如果你不隐藏它，旋转看起来很奇怪。所以我决定旋转 0.0000001deg 并且成功了！图像仅在过渡期间模糊，但在结束和开始时图像清晰。可能是我的图片太小了。

所以，我目前的解决方案是将这部分添加到 CSS（没有别的）：

    img {
      transform: rotate(0.00000000001deg);
    }

如何修复变换比例上的模糊图像

How to fix blurry Image on transform scale

html

css

hover

blurry