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

- 原文链接：https://www.xintheme.com/wpjiaocheng/788.html
- 发布日期：2018-05-18
- 更新时间：2026-08-22
- 作者：大胡子 | XinTheme
- 分类目录：WordPress教程
- 标签：css3、css去除锯齿、rotate、transform

## 摘要

现在做的WordPress主题很少考虑IE等古董浏览器的兼容性问题，所以能最大程度的使用CSS3所带来的便捷。 在近期的一个项目中，根据设计需求，需要把图片以倾...

## 正文

现在做的[WordPress主题](https://www.xintheme.com)很少考虑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的值达到自己想要的效果。