html - CSS 'transform rotate' 创建工件

Question

我已经在 CSS 中完成了。

添加后在 Google Chrome 中运行良好:

-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 .