-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. sql server 对象资源管理器（一）

    当需要查看具体数据库的所有用户表.存储过程等创建修改等脚本的时候,可以借用视图中的对象资源管理器的详细信息里面获取. 具体操作如下图所示:

  2. Java -- 找不到或无法加载主类

    原文:http://wenku.baidu.com/link?url=5nS1GEaePn-hmtAg6xXdJvtt9Z89JQsakhqSv8fambaJY2t9nKPtf3hXFpjW-BtD9 ...

  3. MVC – 4.mvc初体验(1)

    1.MVC请求模式   2.MVC简单请求流程图 展开 折叠     3.返回string的mvc方法 展开 折叠   4.加载视图的方法  

  4. GBDT原理实例演示 2

        一开始我们设定F(x)也就是每个样本的预测值是0(也可以做一定的随机化) Scores = { 0, 0, 0, 0, 0, 0, 0, 0}     那么我们先计算当前情况下的梯度值     ...

  5. hdu 1247:Hat’s Words（字典树，经典题）

    Hat’s Words Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  6. hdu 2516 FIB博弈

    分析请看:cxlove #include<iostream> #include<cstdio> #include<cstring> #include<algo ...

  7. 从官方ROM中提取原生APK

    背景:由于自己手机总出现android.process.acore问题,最后发现是被自己精简掉了日历相关应用,故寻找提取原生apk. 注:解决方案主要是在机锋论坛上看到的. 环境要求:需要电脑安卓ja ...

  8. linux中socket的理解

    对linux中socket的理解 一.socket 一般来说socket有一个别名也叫做套接字. socket起源于Unix,都可以用“打开open –> 读写write/read –> ...

  9. .NET中的六个重要概念：栈、堆、值类型、引用类型、装箱和拆箱

    为何要翻译 一来是为了感受国外优秀技术社区知名博主的高质量文章,二来是为了复习对.NET技术的基础拾遗达到温故知新的效果,最后也是为了锻炼一下自己的英文读写能力.因为是首次翻译英文文章(哎,原谅我这个 ...

  10. loj 1337

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1337 思路:对于搜过的区域进行标记,如果要求的点落在已经搜过的区域,那么直接取出来即可 ...