css 变换，chrome 中的锯齿状边缘 [英] css transform, jagged edges in chrome

问题描述

我一直在使用 CSS3 转换来旋转我网站中带有边框的图像和文本框.

I've been using CSS3 transform to rotate images and textboxes with borders in my website.

问题是 Chrome 中的边框看起来是锯齿状的，就像没有抗锯齿的(低分辨率)游戏一样.在 IE、Opera 和 FF 中，它看起来好多了，因为使用了 AA(仍然清晰可见，但还不错).我无法测试 Safari，因为我没有 Mac.

The problem is that the border look jagged in Chrome, like a (low-resolution) game without Anti-Aliasing. In IE, Opera and FF it looks much better because AA is used (which is still clearly visible but not that bad). I can't test Safari because I don't own a Mac.

旋转后的照片和文字本身看起来不错，只是边框看起来有锯齿.

The rotated photo and text itself look fine, it is only the border that looks jagged.

我使用的 CSS 是这样的:

The CSS I use is this:

.rotate2deg {
    transform: rotate(2deg);
    -ms-transform: rotate(2deg); /* IE 9 */
    -webkit-transform: rotate(2deg); /* Safari and Chrome */
    -o-transform: rotate(2deg); /* Opera */
    -moz-transform: rotate(2deg); /* Firefox */
}

有什么办法可以解决这个问题，例如强制 Chrome 使用 AA?

Is there any way I can fix this, e.g. by forcing Chrome to use AA?

示例如下:

推荐答案

如果有人在以后搜索这个，在 Chrome 中摆脱 CSS 转换上那些锯齿状边缘的一个好技巧是添加 CSS 属性 -webkit-backface-visibility，值为 hidden.在我自己的测试中，这已经完全消除了它们.希望有所帮助.

In case anyone's searching for this later on, a nice trick to get rid of those jagged edges on CSS transformations in Chrome is to add the CSS property -webkit-backface-visibility with a value of hidden. In my own tests, this has completely smoothed them out. Hope that helps.

-webkit-backface-visibility: hidden;

这篇关于css 变换，chrome 中的锯齿状边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！