我一直在使用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?
在下面的例子:
当前回答
我已经尝试了这里所有的解决方案，但对我的情况都不起作用。但使用
will-change: transform;
修复了锯齿问题。
其他回答
为了防止以后有人搜索这个，在Chrome中消除CSS转换上的锯齿状边缘的一个好技巧是添加CSS属性-webkit-backface-visibility，值为hidden。在我自己的测试中，这完全消除了它们。
-webkit-backface-visibility: hidden;
你可以使用模糊的盒子阴影来掩盖锯齿。使用-webkit-box-shadow代替box-shadow将确保它不会影响非webkit浏览器。不过，你可能想检查一下Safari和移动webkit浏览器。
结果稍微好一些，但仍然比其他浏览器差很多:
添加1px透明边框将触发抗锯齿
outline: 1px solid transparent;
或者，添加一个1px的透明盒子阴影。
box-shadow: 0 0 1px rgba(255,255,255,0);
在有问题的元素周围的div上添加以下内容为我解决了这个问题。
-webkit-transform-style: preserve-3d;
在我的例子中，锯齿状的边缘出现在视频窗口周围。
如果你使用的是transition而不是transform， -webkit-backface-visibility: hidden;不管用。在透明png文件的动画过程中会出现锯齿状边缘。
为了解决这个问题，我使用:outline: 1px solid transparent;
