CSS的'transform rotate'会产生图像瑕疵。

Question

我已经在CSS中完成了这个任务。 在添加以下内容后，它可以在Google Chrome中很好地工作：

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

但在FireFox中，它的效果是这样的:

查看源代码

我尝试了很多方法并进行了搜索。我不知道该怎么做才能摆脱FireFox创建的边框。大多数我发现的内容都是关于过渡，而我没有使用过渡。任何想法都非常受欢迎。

参考文献：
- CSS3 transform rotate causing 1px shift in Chrome
- -webkit-transform rotate - Pixelated images in Chrome
- CSS transition effect makes image blurry / moves image 1px, in Chrome?

- Kev

---

在Firefox中，我得到了一个空白页面。 - andreas

@Andreas，也许图片无法正常显示？这很奇怪。你能试试这个链接吗？http://jsbin.com/pedudogejo/1 - Kev

Answer 1

在旋转规则之前添加translateZ(1px)似乎可以消除这些伪像：

transform: translateZ(1px) rotate(-45deg);

请参见此问题。

- andreas

---

嗨，Andreas，感谢你的帮助。在Chrome、Firefox和Safari中它运行得很好，但我刚刚发现该错误仍然存在于IE和Edge中。如果你有任何想法，那将非常有帮助。谢谢！ - Kev

@Kev - 我通过在旋转元素中添加 background-clip: padding-box; 来解决了IE中的问题。 - shrewdbeans