-webkit-transform 旋转 - Chrome 中的像素化图像
在容器 div 上使用 -webkit-transform:rotate(-5deg);，Chrome 会渲染具有真正锯齿状边缘的图像网格。而在 FF (-moz-transform:) 和 IE (-ms-filter:) 中，一切看起来都正常 - 请参阅下面的差异。
对此我能做些什么吗？
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（9）
您可以查看问题的答案 css 变换，chrome 中的锯齿状边缘
帮助我
从接受的答案中：
You could check out the answer to the question css transform, jagged edges in chrome
Helped me out
From the accepted answer:
这似乎是 webkit 引擎中的一个 抗锯齿 错误。 报告已提交，但尚未解决。
您可以尝试添加与背景颜色相同的边框，以尽量减少影响。
It appears to be an Antialiasing bug in the webkit engine. A report has been filed but is as yet unsolved.
You can try adding a border the same color as your background to try to minimise the effect.
对 chrome 有用。
Does the trick for chrome.
您是否尝试过CSS规则
-webkit-transform-style：preserve-3d;？您还可以尝试使用
-webkit-transform:rotateZ(-5deg);旋转特定轴。Have you tried the CSS rule
-webkit-transform-style: preserve-3d;?You could also try rotating the specific axis with
-webkit-transform: rotateZ(-5deg);.我在 Chrome 33 (Windows 7) 上遇到了这个问题。我尝试了此页面上所有建议的修复。痛苦随之而来。我的轮换非常简单：
我找到了这个答案经过一些快速实验，我发现以下组合在 Chrome 中完美运行：
我还没有测试跨浏览器。我不知道这会引入哪些进一步的错误。你已被警告过。希望这能为某人指明正确的方向。
旁注：在我的实验中，我发现
-webkit-backface-visibility:hidden;（单独）删除了未转换图像的抗锯齿功能。I encountered this issue on Chrome 33 (Windows 7). I tried all the suggested fixes on this page. Misery ensued. My rotation was pretty simple:
I found this answer and after some quick experimentation I found that the following combination works perfectly in Chrome:
I haven't tested cross browser yet. I have no idea which further bugs this introduces. You have been warned. Hope this points someone in the right direction.
Side note: During my experiments I found that
-webkit-backface-visibility: hidden;(on its own) removed the antialiasing from untransformed images.这是一个已修复的 WebKit 错误，并且 该修复程序应出现在 Chrome 15 中。
在每个人都更新到 15+ 之前，解决方法是将
-webkit-backface-visibility: hide;应用于正在旋转的元素。为我工作。这会触发元素上的抗锯齿功能。This is a WebKit bug that has been already fixed and the fix shall appear in Chrome 15.
The workaround until everyone updates to 15+ is to apply
-webkit-backface-visibility: hidden;to the element being rotated. Worked for me. That triggers antialiasing on the element.您可以向图像添加与背景颜色相同的框阴影，以减少效果。
例子：
http://antialiasing-webkit.qip.li/edit/
You can add box-shadow to your images with the same color as your background, that reduce the effect.
example:
http://antialiasing-webkit.qip.li/edit/
这并不适合所有用途，但如果您可以控制标记并且不介意添加额外的
您可以在此处查看示例： http://jsfiddle.net/cherryflavourpez/2SKQW/2/
第一个图像没有做任何处理，第二个图像应用了边框来匹配背景颜色 - 我看不出有任何区别。
第三个图像 div 具有一些生成的内容，并在边缘周围放置了边框。虽然边缘丢失了一个像素，但看起来好多了。 CSS 是非常不言自明的。这样做的优点是不需要您在图像中创建边框，这对我来说似乎代价太大了。
This won't be appropriate for all uses, but where you have control over the markup and don't mind adding an extra <div>, you can make use of generated content to dramatically clean up the edges of rotated images in Chrome. This works because Chrome will apply anti-aliasing to the generated content placed over the image.
You can see an example here: http://jsfiddle.net/cherryflavourpez/2SKQW/2/
The first image has nothing done to it, the second has a border applied to match the background colour - not any difference that I can see.
The third image div has some generated content with a border placed around the edge. You lose a pixel around the edge, but it looks much better. The CSS is pretty self-explanatory. This has the advantage of not requiring you to create the border in your image, which seems like too big a price to me.
对我来说，透视 CSS 属性起到了作用：
在我的例子中完全不合逻辑，因为我没有使用 3d 过渡，但仍然有效。
For me it was the perspective CSS property that did the trick:
Completely illogical in my case as I use no 3d transitions, but works nonetheless.