-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. php的错误级别

    error_reporting() 用于设置 PHP 的报错级别并返回当前级别.(PHP 4, PHP 5) 函数能够在运行时设置 error_reporting 指令. PHP 有诸多错误级别,使用 ...

  2. jdbc连接oracle数据库

    /*** 通过改变配置文件来连接不同数据库*/package com.xykj.jdbc; import static org.junit.Assert.*; import java.io.Input ...

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

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

  4. catch that cow (bfs 搜索的实际应用，和图的邻接表的bfs遍历基本上一样)

    Catch That Cow Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 38263   Accepted: 11891 ...

  5. 攻城狮在路上（壹） Hibernate（十七）--- Hibernate并发处理问题

    一.多个事务并发运行时的并发问题: 总结为第一类丢失更新.脏读.虚读.不可重复读.第二类丢失更新. 1.第一类丢失更新: 撤销一个事务时,把其他事务已提交的更新数据覆盖. 2.脏读: 一个事务读到另一 ...

  6. 打造理想的Windows 10 APP开发环境的5个步骤

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:微软即将发布Windows 10手机版,实际上很多人现在已经开始在开发Windows ...

  7. 第二篇：SOUI源码的获取及编译

    源代码的获取 SOUI的源码采用SVN管理. SVN:http://code.taobao.org/svn/soui2 这里主要包含两个目录:trunk 及 third-part. trunk目录保存 ...

  8. android:imeOptions属性(转)

    默认情况下软键盘右下角的按钮为“下一个”,点击会到下一个输入框,保持软键盘 设置 android:imeOptions="actionDone" ,软键盘下方变成“完成”,点击后光 ...

  9. 高效jQuery的奥秘

    讨论jQuery和javascript性能的文章并不罕见.然而,本文我计划总结一些速度方面的技巧和我本人的一些建议,来提升你的jQuery和javascript代码.好的代码会带来速度的提升.快速渲染 ...

  10. document.body / document.ducumentElement /等获取高度和宽度的区别 ----转载

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...