Html -webkit-transform rotate - Chrome 中的像素化图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5078186/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
-webkit-transform rotate - Pixelated images in Chrome
提问by davivid
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.
使用-webkit-transform: rotate(-5deg);一个div容器，Chrome的渲染与真正的锯齿边缘图像的网格。而在 FF ( -moz-transform:) 和 IE ( -ms-filter:) 中，一切看起来都不错 - 请参阅下面的区别。
Is there any thing I can do about this?
对此我有什么可以做的吗？
回答by Christian Westman
You could check out the answer to the question css transform, jagged edges in chrome
您可以查看问题css transform, jagged edge in chrome的答案
Helped me out
帮了我
From the accepted answer:
从接受的答案：
In case anyone's searching for this later on, a nice trick to get rid of those jagged edges on CSS transformations in Chrome is to add the CSS property
-webkit-backface-visibilitywith a value ofhidden. In my own tests, this has completely smoothed them out. Hope that helps.
如果稍后有人搜索此内容，在 Chrome 中摆脱 CSS 转换上那些锯齿状边缘的一个好技巧是添加
-webkit-backface-visibility值为.css 的 CSS 属性hidden。在我自己的测试中，这已经完全消除了它们。希望有帮助。
回答by Kyle
It appears to be an Antialiasingbug in the webkit engine. A report has been filed but is as yet unsolved.
它似乎是webkit 引擎中的抗锯齿错误。已提交报告但尚未解决。
You can try adding a border the same color as your background to try to minimise the effect.
您可以尝试添加与背景颜色相同的边框，以尽量减少效果。
回答by Guido Gallenkamp
-webkit-transform: rotate(-5deg) translate3d( 0, 0, 0);
Does the trick for chrome.
铬的诀窍。
回答by Luke Dennis
Have you tried the CSS rule -webkit-transform-style: preserve-3d;?
您是否尝试过 CSS 规则-webkit-transform-style: preserve-3d;？
You could also try rotating the specific axis with -webkit-transform: rotateZ(-5deg);.
您也可以尝试使用 旋转特定轴-webkit-transform: rotateZ(-5deg);。
回答by Just Plain High
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:
我在 Chrome 33 (Windows 7) 上遇到了这个问题。我尝试了此页面上的所有建议修复。苦难接踵而至。我的轮换非常简单：
transform: rotate(40deg);
-moz-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
I found thisanswer and after some quick experimentation I found that the following combination works perfectly in Chrome:
我找到了这个答案，经过一些快速实验后，我发现以下组合在 Chrome 中非常有效：
-webkit-backface-visibility: hidden;
outline: 1px solid transparent;
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) removedthe antialiasing from untransformed images.
旁注：在我的实验中，我发现-webkit-backface-visibility: hidden;（单独）从未转换的图像中去除了抗锯齿。
回答by Dmitry Leskov
This is a WebKit bugthat has been already fixed and the fix shall appear in Chrome 15.
这是一个已经修复的WebKit 错误，修复将出现在 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.
在每个人都更新到 15 岁以上之前的解决方法是应用于-webkit-backface-visibility: hidden;正在旋转的元素。为我工作。这会触发元素上的抗锯齿。
回答by soufell
You can add box-shadow to your images with the same color as your background, that reduce the effect.
您可以向与背景颜色相同的图像添加框阴影，以减少效果。
回答by Aron
For me it was the perspective CSS property that did the trick:
对我来说，透视 CSS 属性起到了作用：
-webkit-perspective: 1000;
Completely illogical in my case as I use no 3d transitions, but works nonetheless.
在我的情况下完全不合逻辑，因为我没有使用 3d 过渡，但仍然有效。
回答by CherryFlavourPez
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 willapply anti-aliasing to the generated content placed over the image.
这并不适用于所有用途，但是如果您可以控制标记并且不介意添加额外的 <div>，您可以利用生成的内容来显着清理 Chrome 中旋转图像的边缘。这是有效的，因为 Chrome将对放置在图像上的生成内容应用抗锯齿。
You can see an example here: http://jsfiddle.net/cherryflavourpez/2SKQW/2/
你可以在这里看到一个例子：http: //jsfiddle.net/cherryflavorpez/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.
第三个图像 div 有一些生成的内容，边缘放置了一个边框。您在边缘周围丢失了一个像素，但看起来好多了。CSS 是不言自明的。这样做的优点是不需要您在图像中创建边框，这对我来说似乎代价太大。
