-webkit-transform旋转 – Chrome中的像素化图像

使用-webkit-transform: rotate(-5deg); 在一个容器div上,Chrome呈现了边缘非常锯齿状的图像网格。 而在FF( -moz-transform:和IE( -ms-filter:一切都看起来不错 – 看下面的区别。

我能做些什么吗?

铬FF

你可以检查出问题的CSS变换的答案,在铬的锯齿边缘

帮我出去了

从接受的答案:

如果有人在后面search,在Chrome中摆脱CSS转换锯齿状边缘的一个很好的诀窍就是添加CSS属性-webkit-backface-visibility ,其值为hidden 。 在我自己的testing中,这已经完全平滑了。 希望有所帮助。

它似乎是一个Webkit引擎中的反锯齿问题 。 一份报告已经提交,但尚未解决 。

您可以尝试添加与背景相同颜色的边框,以尽量减less效果。

 -webkit-transform: rotate(-5deg) translate3d( 0, 0, 0); 

对铬的窍门?

你有没有尝试过的CSS规则-webkit-transform-style: preserve-3d;

您也可以尝试使用-webkit-transform: rotateZ(-5deg);旋转特定轴-webkit-transform: rotateZ(-5deg);

我在Chrome 33(Windows 7)上遇到过这个问题。 我试着在这个页面上的所有build议的修复。 随之而来的是苦难。 我的轮换很简单:

 transform: rotate(40deg); -moz-transform: rotate(40deg); -webkit-transform: rotate(40deg); 

我发现这个答案,并经过一些快速实验后,我发现以下组合在Chrome中完美工作:

 -webkit-backface-visibility: hidden; outline: 1px solid transparent; 

我还没有testing过跨浏览器。 我不知道这引入了哪些进一步的错误。 你被警告了。 希望这个人指向正确的方向。


附注:在我的实验过程中,我发现-webkit-backface-visibility: hidden; (自己)从未转换的图像中删除了抗锯齿。

这是一个已经修复的WebKit错误 , 修复程序将出现在Chrome 15中 。

直到每个人都更新到15+的解决方法是应用-webkit-backface-visibility: hidden; 到被旋转的元素。 为我工作。 这触发元素的抗锯齿。

您可以使用与您的背景相同的颜色为您的图像添加阴影,从而减less效果。

例如: http : //antialiasing-webkit.qip.li/edit/

这不适合所有的用途,但是你可以控制标记,并且不介意添加额外的<div>,你可以使用生成的内容来显着清理Chrome中旋转图像的边缘。 这是有效的,因为Chrome 会对放置在图像上的生成内容应用消除锯齿。

你可以在这里看到一个例子: http : //jsfiddle.net/cherryflavourpez/2SKQW/2/

第一个图像没有做任何事情,第二个有一个边框适用于匹配的背景颜色 – 没有任何区别,我可以看到。

第三个图像div有一些生成的内容与边缘放置在边缘周围。 你失去了一个像素的边缘,但它看起来好多了。 CSS是非常自明的。 这样做的好处是不需要在图像中创build边框,这对我来说似乎太大了。

对我来说,这是CSS的财产angular度做的伎俩:

 -webkit-perspective: 1000; 

在我的情况下完全不合逻辑,因为我不使用3d转换,但仍然有效。