google-chrome - css 变换，chrome 中的锯齿状边缘

Question

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

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

旋转的照片和文字本身看起来很好，只是边框看起来有锯齿。

我使用的 CSS 是这样的:

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

示例如下:

Answer 1

万一以后有人搜索这个，在 Chrome 中摆脱 CSS 转换中那些锯齿状边缘的一个好技巧是添加值为 -webkit-backface-visibility 的 CSS 属性隐藏。在我自己的测试中，这已经完全消除了它们。

-webkit-backface-visibility: hidden;