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

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

我能做些什么吗？

你可以检查出问题的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转换，但仍然有效。