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