Html 如何修复变换比例上的模糊图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36787529/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fix blurry Image on transform scale
提问by Viktor Zahov
When i put transform: scale(1.1);on hover on some element the image became blurry. How to fix this bug?
当我将 transform:scale(1.1);悬停在某个元素上时，图像变得模糊。如何修复这个错误？
Example
例子
回答by dimitar
Try this, it's work fine for me!
试试这个，它对我来说很好用！
img {
-webkit-backface-visibility: hidden;
-ms-transform: translateZ(0); /* IE 9 */
-webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
transform: translateZ(0);
}
回答by axecopfire
TL;DR
transform: scaleis actually scaling the original image, and because you are leaving it to the browser's render engine to figure out what should go there you got a blurry image. try
TL;DR
transform: scale实际上是缩放原始图像，因为您将它留给浏览器的渲染引擎来确定应该去那里的内容，所以您得到了一个模糊的图像。尝试
img {
transform: scale(.9)
}
img:hover {
transform: scale(1)
}
Aaron Sibler answered the question for me.
Aaron Sibler为我回答了这个问题。
Hey guys – 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
嘿伙计们 - 我刚刚经历了这个谜语。在您的示例中，您需要将 img 向下转换为“transform: scale(0.7)”，然后在悬停时将图像放大到原始尺寸，如“transform: scale(1.0)”
比例值是相对于原始图像的尺寸——而不是它们在屏幕上的当前尺寸，所以比例 1 总是等于原始图像的尺寸。
我在这里用过这个；
http://meetaaronsilber.com/experiments/css3imgpop/index.html
