3D CSS 变换，Firefox 中的锯齿状边缘
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9235342/
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
3D CSS transform, jagged edges in Firefox
提问by abernier
Similary to "css transform, jagged edges in chrome", same occurs with Firefox on 3D transforms, eg: http://jsfiddle.net/78d8K/5/(<- remember: Firefox)
类似于“ css 变换，chrome 中的锯齿状边缘”，Firefox 在 3D 变换上也会发生同样的情况，例如：http: //jsfiddle.net/78d8K/5/（<-记住：Firefox）
This time, backface-visibilitydoesn't help :(
这一次，backface-visibility没有帮助:(
Any idea?
任何的想法？
回答by Juan Mellado
Edited answer:(after comments)
编辑答案：（评论后）
"Workaround", add a transparent outlineattribute:
“解决方法”，添加一个透明的轮廓属性：
outline: 1px solid transparent;
Tested on Firefox 10.0.2 Windows 7: http://jsfiddle.net/nKhr8/
在 Firefox 10.0.2 Windows 7 上测试：http: //jsfiddle.net/nKhr8/
Original answer:(background-color dependent)
原始答案：（取决于背景颜色）
"Workaround", add a borderattribute with the same color of your background (white this case):
“解决方法”，添加与背景颜色相同的边框属性（在这种情况下为白色）：
border: 1px solid white;
Tested on Firefox 10.0.2 Windows 7: http://jsfiddle.net/LPEfC/
在 Firefox 10.0.2 Windows 7 上测试：http: //jsfiddle.net/LPEfC/
回答by Rafik Bari
If you want to prevent anti-aliased border
如果你想防止抗锯齿边框
Below worked better for me
下面对我来说效果更好
border: 1px solid rgba(0, 0, 0, 0.1);
if the border should be clearly visible, this might not be the perfect solution though, in which you'd better stick to @Juan's answer.
如果边界应该清晰可见，但这可能不是完美的解决方案，您最好坚持@Juan 的回答。
Below is a taken screenshot of the cube turning
下面是立方体转动的截图
回答by Renaat De Muynck
Apart from using outline, the following works as well:
除了使用outline，以下也适用：
box-shadow: 0 0 0 1px transparent;
回答by grilly
filter:blur(.25px);works for me and doesn't looks too blurry.
filter:blur(.25px);对我有用，看起来不太模糊。
Example: https://codepen.io/Grilly86/pen/QWLXBbX(try editing line 22 in the (S)CSS)
示例：https: //codepen.io/Grilly86/pen/QWLXBbX（尝试编辑 (S)CSS 中的第 22 行）
