Html -webkit transform在Chrome中旋转像素化图像

使用

-webkit变换：旋转（-5度）

在容器div上，Chrome渲染具有锯齿状边缘的图像网格。而在FF（

-moz-transform:

）和IE（

-ms-filter:

）中，一切看起来都正常-请参见下面的区别

我能做点什么吗

---

您是否尝试过CSS规则

-webkit转换样式：preserve-3d

您还可以尝试使用
-webkit transform:rotateZ（-5度）旋转特定轴
这似乎是webkit引擎中的一个错误

您可以尝试添加与背景颜色相同的边框，以尽量减少效果。
这并不适用于所有用途，但如果您可以控制标记，并且不介意添加额外的边框，则可以使用生成的内容来显著清理Chrome中旋转图像的边缘。这是因为Chrome将对放置在图像上的生成内容应用抗锯齿

您可以在此处看到一个示例：

第一张图片没有做任何改变，第二张图片有一个与背景颜色相匹配的边框——我看不出有任何区别

第三个图像div有一些生成的内容，边缘周围有一个边框。边缘周围会丢失一个像素，但看起来好多了。CSS是非常不言自明的。这样做的好处是不需要在图像中创建边框，这对我来说似乎太贵了。
您可以在图像中添加与背景颜色相同的框阴影，从而降低效果

例如：
您可以查看问题的答案

帮了我的忙

根据公认的答案：

万一以后有人在找这个，这是一个摆脱它的好办法
在Chrome中CSS转换的锯齿边中，添加
CSS属性
-webkit背面可见性
，值为
隐藏
。
在我自己的测试中，这已经完全消除了它们。希望
有帮助

这是一个已被修复和修复的问题

在everyone更新到15+之前，解决方法是应用
-webkit背面可见性：隐藏到正在旋转的元素。为我工作。这将触发元素上的抗锯齿

-webkit-transform: rotate(-5deg) translate3d( 0, 0, 0);

为chrome做这个把戏。
对我来说，是透视CSS属性做了这个把戏：

-webkit-perspective: 1000;

在我的情况下，这完全不合逻辑，因为我没有使用3d转换，但仍然有效。
我在Chrome 33（Windows 7）上遇到了这个问题。我在这个页面上尝试了所有建议的修复。不幸接踵而至。我的轮换很简单：

transform: rotate(40deg);
-moz-transform: rotate(40deg);
-webkit-transform: rotate(40deg);

我找到了答案，经过一些快速的实验，我发现以下组合在Chrome中非常有效：

-webkit-backface-visibility: hidden;
outline: 1px solid transparent;

我还没有测试跨浏览器。我不知道这又引入了哪些bug。你已经被警告了。希望这能为人们指明正确的方向


旁注：在我的实验中，我发现
-webkit背面可见性：隐藏（自行）删除了未转换图像中的抗锯齿。
-webkit-在FF和IE中渲染？使用：-ms过滤器和-moz transformAha ok:）在FF和Chrome中看起来相同，Chrome是否缩放？无缩放，文本和其他元素在其他地方似乎都没问题——它似乎只是在图像上——请看上面可能重复的no，我没有尝试过，但它似乎没有任何明显的效果。好吧，谢谢，本来我有边框，但我不希望有边框，这确实会降低效果，虽然没有问题，很高兴它有帮助：）在最初的设计中，白色css边框帮助了很多，但在这个版本中黑色边框帮不了那么多。但是，通过给实际的图像文件一个2px的黑边框，问题就解决了。在最后一条评论中，你可以看到通过GPU将元素发送到可以得到一个解决办法。您必须这样做：旋转（90度）translateZ（0）can-webkit transform:translateZ（0px）；是否给出与其他浏览器的兼容性问题@JulioApparently Chrome的最新开发版本已经倒退，这个技巧不再有效。更多的搜索得出了这一行：-webkit变换样式：preserve-3d；这似乎起到了作用。它起作用了！他们真的应该修复这个bug，尽管它被标记为“已修复”，但这显然不是因为应用上述css属性时您注意到的差异。如果您来回旋转，这个解决方案可能会导致旋转图像中出现透明的“死”像素。这对我来说很有效，从Chrome 23开始，背面可见性似乎触发了抗锯齿。这个错误在Windows 7Chrome 33和Windows 7上的Chrome中没有修复-仍然是一个问题。。。请看我的答案。这是在Chrome47.0.2508.0（最新开发版本）中旋转图像时完全停止像素化的唯一解决方案。这里列出的其他答案似乎使问题变得更糟，
backface visibility:hidden
导致图像在动画期间和动画停止后具有像素化边缘。这很有效-webkit背面可见性解决了这个问题，但是像素化很烦人。我不确定轮廓规则如何纠正像素化，但我不在乎。这是迄今为止我见过的最好的修复方法。