如何修复变换比例上的模糊图像
How to fix blurry Image on transform scale
当我将 transform: scale(1.1);
悬停在某些元素上时,图像变得模糊。如何修复此错误?
示例
试试这个,对我来说效果很好!
img {
-webkit-backface-visibility: hidden;
-ms-transform: translateZ(0); /* IE 9 */
-webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
transform: translateZ(0);
}
长话短说;博士
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
我遇到了 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;
}
}
希望这对您有所帮助,我的解释是有道理的。
如果这对您不起作用,请发表评论。
我已经阅读了所有评论,并尝试了人们建议的所有解决方案。但除了旋转(360 度)之外,没有什么是真正好的。一切,除了这一个在图像上结结巴巴,或者一开始它们变得太模糊了。但是如果你不隐藏它,旋转看起来很奇怪。所以我决定旋转 0.0000001deg 并且成功了!图像仅在过渡期间模糊,但在结束和开始时图像清晰。可能是我的图片太小了。
所以,我目前的解决方案是将这部分添加到 CSS(没有别的):
img {
transform: rotate(0.00000000001deg);
}