CSS“变换旋转”创建工件

Posted 2023-03-06

【中文标题】CSS“变换旋转”创建工件

【英文标题】：CSS 'transform rotate' creates artifacts

【发布时间】：2016-12-22 01:41:08

【问题描述】：

我已经在 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?

【问题讨论】：

mh，在 Firefox 中我得到一个空白页..

@Andreas 也许图像不起作用？这很奇怪。你能试试这个吗？ jsbin.com/pedudogejo/1

【参考方案1】：

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

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

见this question。

【讨论】：

嗨安德烈亚斯，感谢您的帮助。它在 Chrome、Firefox 和 Safari 中运行良好，但我刚刚发现该错误仍然存​​在于 IE 和 Edge 中。如果您有任何想法，那将非常有帮助。谢谢！

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