CSS“变换旋转”创建工件

Question

我已经在 CSS 中完成了这项工作。

添加后在谷歌浏览器中效果很好：

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

但在 FireFox 中是这样的：

见source here

我尝试了几件事并进行了很多搜索。我不知道该怎么做才能摆脱 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?

Answer 1

在轮换规则之前添加translateZ(1px) 似乎可以删除这些工件：

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

见this question。