-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. hdu 2057 A+B

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2057 For each test case,print the sum of A and B in h ...

  2. JQ AJAX

    用AJAX方法不刷新网页使用下拉列表连接数据库 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  3. 【JAVA之泛型】

    一.引例. 1.引例. 假设现在有一个ArrayList的容器,如果不使用泛型约束,则可以向容器中加入各种类型的对象,但是如果取出来的时候只是用一种类型的转换则肯定会抛出ClassCastExcept ...

  4. [LeetCode] Letter Combinations of a Phone Number

    Given a digit string, return all possible letter combinations that the number could represent. A map ...

  5. FTP的20、21端口，工作模式

    什么是FTP? FTP就是文件传输协议 File Transfer Protocol 的缩写. FTP端口号是多少? 21 FTP的端口号能改吗? 能 ftp的端口号20.21有何区别? 一个是数据端 ...

  6. postgresql设置默认的search_path

    -- Use this to show the current search_path -- Should return: "$user",public SHOW search_p ...

  7. maven pom.xml示例

    示例说明: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3. ...

  8. VS2015 Preview Secondary Installer 离线安装

    VS2015 Preview Secondary Installer 离线安装 天朝的原因orz, 装过vs2015 preview 的人都懂的,第二阶段安装会失败.假公济私的研究了下VS2015,摸 ...

  9. ASP.NET MVC 4 WebAPI Simple Sample

    // Controllers.cs namespace Microshaoft.WebApi.Controllers { using Microshaoft.WebApi.Models; using ...

  10. How to AC it

    旋转卡壳 DP,网络流