-webkit-transform rotate - Chrome中的像素化图像

Question

在容器div上使用-webkit-transform: rotate(-5deg);，Chrome会渲染具有锯齿状边缘的图像网格。在FF（-moz-transform:）和IE（-ms-filter:）中，一切看起来都不错 - 请看下面的差异。

我能做些什么吗？

Answer 1

您可以查看问题css transform, jagged edges in chrome

的答案

帮帮我

从接受的答案：

  

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

Answer 2

它似乎是webkit引擎中的Antialiasing错误。 A report has been filed but is as yet unsolved。

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

Answer 3

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

Chrome的技巧。

Answer 4

您是否尝试过CSS规则-webkit-transform-style: preserve-3d;？

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

Answer 5

我在Chrome 33（Windows 7）上遇到过此问题。我在此页面上尝试了所有建议的修复程序。随之而来的是痛苦。我的轮换非常简单：

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

我找到this回答，经过一些快速的实验后，我发现以下组合在Chrome中完美运行：

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

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

---

旁注：在我的实验中，我发现-webkit-backface-visibility: hidden;（单独）从未转换的图像中移除抗锯齿。

Answer 6

这是WebKit bug已修复且the fix shall appear in Chrome 15。

每个人都更新到15岁以上的解决方法是将-webkit-backface-visibility: hidden;应用于正在轮换的元素。为我工作。这会触发对元素的抗锯齿。

Answer 7

您可以使用与背景相同的颜色为图像添加框阴影，从而降低效果。

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

Answer 8

这不适合所有用途，但是如果您可以控制标记并且不介意添加额外的＆lt; div＆gt;，则可以利用生成的内容来大幅清理旋转图像的边缘在Chrome中。这是有效的，因为Chrome 将将抗锯齿应用于放置在图像上的生成内容。

您可以在此处查看示例：http://jsfiddle.net/cherryflavourpez/2SKQW/2/

第一张图片没有做任何事情，第二张图片的边框应用了与背景颜色相匹配的颜色 - 没有任何我能看到的差异。

第三个图像div有一些生成的内容，边缘周围有边框。你在边缘丢了一个像素，但看起来好多了。 CSS非常明显。这样做的好处是不需要你在图像中创建边框，这对我来说似乎太贵了。

Answer 9

对我而言，透视CSS属性可以解决这个问题：

-webkit-perspective: 1000;

在我的情况下完全不合逻辑，因为我没有使用3D过渡，但仍然有效。