-webkit-transform rotate - Chrome中的像素化图片 [英] -webkit-transform rotate - Pixelated images in Chrome

问题描述

在容器div上使用 -webkit-transform：rotate（-5deg）; ，Chrome会渲染出具有真正锯齿状边缘的图像网格。而在FF（ -moz-transform：）和IE（ -ms-filter：）一切都好看 -

解决方案

您可以查看问题的答案 css transform，镶嵌边缘在Chrome 中

帮助我

从接受的答案：

如果以后任何人搜索这个，在Chrome中的CSS转换中，删除这些锯齿状边缘的
是添加
CSS属性 -webkit-backface-visibility ，值为 hidden 。
在我自己的测试中，这已经完全平滑了它们。希望
有帮助。

Using -webkit-transform: rotate(-5deg); on a container div, Chrome renders the grid of images with really jagged edges. Whereas in FF (-moz-transform:) and IE (-ms-filter:) everything looks OK - see the difference below.

Is there any thing I can do about this?

解决方案

You could check out the answer to the question css transform, jagged edges in chrome

Helped me out

From the accepted answer:

In case anyone's searching for this later on, a nice trick to get rid of those jagged edges on CSS transformations in Chrome is to add the CSS property -webkit-backface-visibility with a value of hidden. In my own tests, this has completely smoothed them out. Hope that helps.

这篇关于-webkit-transform rotate - Chrome中的像素化图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！