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

现在做的WordPress主题很少考虑IE等古董浏览器的兼容性问题，所以能最大程度的使用CSS3所带来的便捷。

在近期的一个项目中，根据设计需求，需要把图片以倾斜10度的方式来呈现出效果。于是便做了一个例子：[css]transform: skewX(10deg);-moz-transform: rotate(10deg);-webkit-transform: rotate(10deg);[/css] 把图片旋转了10度。本以为轻而易举，可遇到了问题，图片边缘会有很明显锯齿，如果图片上级元素含有overflow:hidden;属性，则会让锯齿感更明显。

通过查找相关的资料，终于找到了解决办法。便是使用CSS3 3D transforms，通过GPU来渲染，能有效的起到抗锯齿效果。我们只要简单的在CSS3 transform属性中加入translateZ(0)。例：[css]-webkit-transform: rotate(10deg) translateZ(0);[/css]

可以根据需要调整translateZ的值达到自己想要的效果。