-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);

还有两种方法是 rotate3d + border:1px solid transparent; 和 rotate3d + margin:-1px方法也能解决但是最终的渲染效果还是没有通过GPU渲染的好。

CSS3 transform rotate（旋转）锯齿的解决办法的更多相关文章

  1. 拒绝IE8-,CSS3 transform rotate旋转动画效果（支持IE9+/chrome/firefox）

    <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta nam ...

  2. CSS3 transform rotate（旋转）锯齿/元素抖动模糊的解决办法

    使用CSS3 3D transforms,通过GPU来渲染,能有效的起到抗锯齿效果.只要在CSS3 transform属性中加入translateZ(0).例:-webkit-transform: r ...

  3. 使用input range滑块，控制元素transform rotate旋转样式

    <!DOCTYPE html> <html> <head> </head> <body> <!-- 第一步:设置div旋转对象和inp ...

  4. transform:rotate/旋转

    <!DOCTYPE html> <html> <head> <style> div { width:100px; height:75px; backgr ...

  5. CSS3 transform 属性 旋转 div 元素

    div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* ...

  6. CSS3 关于@font-face引用中文字体解决办法

    有两种方法,一种简单的,一种比较复杂,都可以实现(注:这里的方法只适合使用少量的中文字体,如果使用的字量过大,请使用其他方法解决) 第一种:简单的 1.下载需要的中文字体的.ttf格式,这个都不难找到 ...

  7. iOS开发- 相机(摄像头)获取到的图片自动旋转90度解决办法

    http://blog.csdn.net/hitwhylz/article/details/39518463

  8. css3 翻牌(rotate) 以及翻转 导致边缘锯齿解决 方法

     主要知识点:rotate旋转以及  outline透明的像素消除(明显降低)火狐旋转是产生的 锯齿  首先看结构: <li class="flip-container " ...

  9. 使用 SVG transform rotate 解决画框中的数字跟随旋转的问题

    问题描述 在图片上画框标注数字,旋转画布后,数字随之旋转,可读性不强,要求修改成无论画布怎么旋转,数字都是正向显示~ 原交互图示: 解决方案 先看下 dom 的结构 然后看下下面简单的代码 // 获取 ...

随机推荐

  1. Maven构建Hadoop Maven构建Hadoop工程

    一.安装maven linux eclipse3.6.1 maven安装 二:官网依赖库 我们可以直接去官网查找我们需要的依赖包的配置pom,然后加到项目中. 官网地址:http://mvnrepos ...

  2. PHP常用函数大全。

    php usleep() 函数延迟代码执行若干微秒. unpack() 函数从二进制字符串对数据进行解包. uniqid() 函数基于以微秒计的当前时间,生成一个唯一的 ID. time_sleep_ ...

  3. python中读取\写入CSV中数据的方法

  4. JavaScript的内置对象和浏览器对象

    在javascript中对象通常包括两种类型:内置对象和浏览器对象,此外,用户还可以自定义对象. 对象包含两个要素:1.用来描述对象特性的一组数据,也就是若干变量,通常称为属性.2.用来操作对象特性的 ...

  5. 利用bak文件恢复数据库问题小结

    对备份的基础理解: --完整备份:完整备份会备份所有数据的区和少量的日志(日志文件用于恢复数据保持数据一致性).由于差异备份需要依据最后一次完整备份,因此完整备份会清楚一些分配位图数据. --差异备份 ...

  6. 傻瓜式十分钟免费开启 HTTPS，是时候为你的站点加上小绿锁了

    http://gold.xitu.io/entry/57df65690bd1d00057f9455b?from=singlemessage&isappinstalled=0 原文链接:http ...

  7. elementar OS体验

    关于其说明请参考https://linuxtoy.org/archives/elementary-os-luna.html

  8. hdu 4568 Hunter(spfa预处理 + 状压dp)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4568 思路:首先spfa预处理出每对宝藏之间的最短距离以及宝藏到边界的最短距离,然后dp[state] ...

  9. 启动Tomcat服务器报错： Several ports (8005, 8080, 8009) required

    错误记录--更改tomcat端口号方法,Several ports (8005, 8080, 8009) http://blog.csdn.net/xinxin19881112/article/det ...

  10. Blog Starting...

    30出头,开始Blog记录学习生活的点滴,待40时再回来一看.