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

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\ntransform: scale实际上是缩放原始图像，因为您将其留给浏览器的渲染引擎来确定应该放在那里的内容，所以您得到了模糊的图像。尝试

\n

img {\ntransform: scale(.9)    \n}\n\nimg:hover {\ntransform: scale(1)\n}\n

\n

亚伦·西伯勒（Aaron Sibler）为我回答了这个问题。

\n

\n

我刚刚经历过这个谜语。在您的示例中，您\xe2\x80\x99ll\n需要将img向下转换为\xe2\x80\x9ctransform:scale(0.7)\xe2\x80\x9d，然后\n在悬停时放大到图像本机尺寸，例如\ n\xe2\x80\x9c变换：比例(1.0)\xe2\x80\x9d

\n

比例值是相对于原始图像\xe2\x80\x99s 尺寸\xe2\x80\x93 而不是\n它们在屏幕上的当前尺寸，因此比例 1 始终等于\原始图像\xe2\x80\x99s 尺寸。

\n

我\xe2\x80\x99在这里使用过这个；

\n

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

\n

\n