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

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

我能做些什么吗?

铬FF

  • 将HTMLstring转换为DOM元素?
  • 为什么浏览器在onclick的值中使用其他单词替代“javascript”时会抛出错误?
  • 带表格的表格:固定的; 以及如何使一列变宽
  • PHP检查,看看variables是整数
  • 嵌套和多个<marquee>烦恼
  • 在WhatsApp ||中显示链接的缩略图 og:图片元标记不起作用
  • 哪个版本的IE支持PNG图标?
  • 如何在表格行(tr)上覆盖div(或任何元素)?
  • 9 Solutions collect form web for “-webkit-transform旋转 – Chrome中的像素化图像”

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