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

Question

当我将变换：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

TL; DR transform: scale实际上是缩放原始图像，因为你将它留给浏览器的渲染引擎来弄清楚应该去哪里，你会得到一个模糊的图像。试试

img {
transform: scale(.9)    
}

img:hover {
transform: scale(1)
}

Aaron Sibler answered the question for me.

  嘿伙计们 - 我刚刚经历过这个谜语。在你的例子中，你会   需要转换img DOWN类似“transform：scale（0.7）”和   然后在悬停时向上缩放到图像原生尺寸   “transform：scale（1.0）”

     

比例值是相对于原始图像的尺寸 - 而不是   它们在屏幕上的当前尺寸，因此1的等级总是等于   原始图像的尺寸。

     

我在这里用过这个;

     

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

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

如果这不适用于您，请发表评论。