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。

CSS 'transform rotate' 创建工件

CSS 'transform rotate' creates artifacts

html

css

css-transforms