CSS3 transform rotate（旋转）锯齿的解决办法

由于现在主要接触移动端，不需要考虑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打开网页，仍会有锯齿。

让我们来测试下效果吧：演示地址

转载于:https://www.cnblogs.com/webu/archive/2013/05/15/3079056.html