由于现在主要接触移动端，不需要考虑IE等古董浏览器的兼容性问题，所以能最大程度的使用CSS3所带来的便捷。
在近期的一个项目中，根据设计需求，需要把图片以倾斜5度的方式来呈现出效果。于是便做了一个例子：-moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度。本以为轻而易举，可遇到了问题。在Fireofx中显示正常，但在webkit内核下的浏览器中，如Chrome和Safari，图片边缘会有很明显锯齿。也可以说是webkit抗锯齿的一个BUG。另外需要补充的一点，如果图片上级元素含有overflow:hidden;属性，则会让锯齿感更明显。
通过查找相关的资料，终于找到了解决办法。便是使用CSS3 3D transforms，通过GPU来渲染，能有效的起到抗锯齿效果。我们只要简单的在CSS3 transform属性中加入translateZ(0)。例：-webkit-transform: rotate(5deg) translateZ(0);
不过使用ipad下的safari打开网页，仍会有锯齿。
让我们来测试下效果吧：演示地址
感谢您的阅读，本文由 蓝色梦想 版权所有。如若转载，请注明出处：蓝色梦想 - CSS3 transform rotate（旋转）锯齿的解决办法
无名 说：
哥们，你这种解决方式不起作用啊
四月 2, 2019 5:09 下午
sam 说：
66666666666666666666666666
我只能说你6了
十一月 9, 2017 5:58 下午
cxzzzz 说：
感谢。。。
九月 11, 2017 5:51 下午
Yostyang 说：
在IE8一下浏览器貌似还是有锯齿的，在偏移度数很小的情况下改怎么处理这些bug呢？
十二月 13, 2012 4:18 下午
梦幻神化 说：
GPU加速是在IE9时才加入的。另外，IE8不支持CSS3，你是使用的IE滤镜？对于不支持CSS3属性的浏览器，还是建议使用图片吧。
十二月 14, 2012 1:21 下午
奔跑的拖拉机 说：
滤镜旋转，有锯齿怎么办呢
六月 2, 2016 10:42 上午
laura 说：
您的博客设计很好，学习学习。。。
十二月 7, 2012 10:35 上午
梦幻神化 说：
感谢您的支持~
十二月 9, 2012 11:23 上午