CSS3 transform rotate(旋转)锯齿的解决办法

本文转载于:专业的前端网站➝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打开网页,仍会有锯齿。

CSS3 transform rotate(旋转)锯齿的解决办法



转载请注明:前端录»CSS3 transform rotate(旋转)锯齿的解决办法


更多专业前端知识,请上【猿2048】www.mk2048.com
上一篇:基于canvas实现钟表


下一篇:python – 没有运行Django doctests的鼻子