transform rotate旋转 锯齿的解决办法

给元素添加旋转效果，:

-moz-transform:rotate(5deg);

-webkit-transform:rotate(5deg);

-o-transform:rotate(5deg);

-ms-transform:rotate(5deg);

transform:rotate(5deg);

再Firefox中显示正常，但在webkit内核下的浏览器中，会有明显的锯齿，如果上级元素含有overflow:hidden属性，则会让锯齿感更明显。

解决办法:

通过GPU来渲染，能有效的起到抗锯齿效果，只需要在css3 transform属性中加入 translateZ(0),例如:transform:rotate(5deg) translateZ(0);不过使用

ipad下在safari打开网页，仍会有锯齿。

 

参考：https://www.bluesdream.com/blog/css3-transform-rotate-serrated-solution.html