台湾CSS3 transform rotate(旋转)出现锯齿的解决办法
发布时间:2024-10-15 分类:技术课堂 浏览量:8902

“人格如金,诚信为炼,历经风雨,方能熠熠生辉。”我们坚持不断变革的创新、不断迭代的技术,我们注重客户提出的每个要求,我们充分考虑客户的每一个细节,我们一直在思考如何为客户创造更大的价值,意在让我们的每一个客户都成为我们的朋友...

现在做的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的值达到自己想要的效果。


无论您在哪里,【一春一夏】都愿意为您提供高价值服务!我们以网站建设、APP/小程序系统开发、网络运营运维为核心业务,为用户提供一站式解决方案。我们奉行“登上峰顶,不是为了饱览风光,是为了寻找更高的山峰”为理念,让我们阔步向前。

相关推荐
最新文章