transform:rotate 属于简单好用的效果,但在手机上显示时,会有比较明显锯齿。

解决方案也很简单, 利用外层容器的overflow:hidden 加上图片margin:-1px 就可以解决。

原理没去深究,理论上是矢量跟位图的处理不一样,这个方案也有个小问题 就是图片变小了 ^_^ 可以用手机看看demo http://labs.aoao.org.cn/demo/transform-rotate/

update: 大家反应这方案在电脑上反而会出问题。

我测试了个新的方案rotate3d + border:1px solid transparent;,问题也算是解决了。

同时发现另一个小问题,缩放的图片使用rotate3d 在非retina 屏下图片会变模糊了点点(属于不对比不发现的),而用rotate就没这问题,这个问题在old iPad 发现。

同时又发现另另一个小问题,iOS 4.x上的 想要平滑,缩放图片哪种都会变模糊了点点(同样属于不对比不发现的),这个问题在old old iPhone 发现的。

当然,本来缩放图片是件不好的事,可是缩放图片在这里是故意的,大家选适合的方案在对应的场景使用吧,原本方案就没想着要在电脑上的浏览器上使用的

transform:rotate在手机上显示有锯齿的解决方案的更多相关文章

  1. transform:rotate在手机上显示有锯齿的解决方案大全

    先来个兼容性说明,洗洗脑: div{transform:rotate(7deg);-ms-transform:rotate(7deg); /* IE 9 */-moz-transform:rotate ...

  2. 如何正确地在手机上显示图片——QImage与QPixmap完全解析

    引言 用Qt程序在手机上显示一幅图片对编程人员来说是再基础不过的一件事情了.那么先让大家看两段代码: //dangerous should not be used, cannot display ea ...

  3. Ionic生成的App安装在手机上后无法联网的解决方案

    在Ionic中使用inappbrowser.themeablebrowser 组件打开网页,刚开始是好的,后来不知添加什么插件,导致了安装在手机上以后没有网络访问权限. 尝试了很多,最后才发现,此时, ...

  4. Android 代码中文字在手机上显示乱码问题解决方法

    在学习Android过程中,用于测试时发现,代码中的中文在真机上会显示乱码, 网上查阅了些资料,参考如下: http://www.androidchina.net/3024.html http://b ...

  5. .Net语言 APP开发平台——Smobiler学习日志:如何在手机上显示类似EXCEL表格

    最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 样式一 一.目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的&qu ...

  6. Web页面在手机上显示过大问题

    网上抄来了,自己也备忘下:增加<meta name="viewport" content="width=device-width, initial-scale=1. ...

  7. 第十二篇 -- 关于U盘制作启动盘后在本机上显示不出来的解决方案

    喜欢玩电脑的朋友应该都重装过系统,最常用的就是用U盘装系统.以前装系统都没问题,不过偶然一次发现了一个问题,就是那个被制作成启动盘的U盘,插在本机上只能显示EFI启动文件部分,而其他空间全都显示不出来 ...

  8. InteractiveHtmlBom 在手机上无法显示 BOM List 和装配图的问题

    InteractiveHtmlBom 在手机上无法显示 BOM List 和装配图的问题 InteractiveHtmlBom 插件是一款用于 KiCad BOM 装配图生成插件. 最近新生成的 文件 ...

  9. 如何在手机上实现 H5 页面全屏显示

    如何在手机上实现 H5 页面全屏显示 fullscreen 隐藏头部地址栏 隐藏底部导航栏 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才 ...

随机推荐

  1. jQuery 选择器 (基础恶补)

    jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") ...

  2. Python学习笔记-常用模块

    1.python模块 如果你退出 Python 解释器并重新进入,你做的任何定义(变量和方法)都会丢失.因此,如果你想要编写一些更大的程序,为准备解释器输入使用一个文本编辑器会更好,并以那个文件替代作 ...

  3. (转)使用myeclipse生成实体类和hibernate映射文件

    转至:http://blog.sina.com.cn/s/blog_9658bdb40100uiod.html 1.下载并安装myeclipse,如果已经安装,则忽略该步骤; 2.打开myeclips ...

  4. 3. Swift 数组|字典|集合

    在OC中数组,字典,集合有自己的表示方法,分别是Array,Dictionary,Set 与 String 都属于数值类型变量,他们都属于结构体. 使用简介灵活多变,个人感觉可读性变差了很多,用起来由 ...

  5. GZFramework代码生成器插件使用教程

    代码生成器分两种 1.基于独立exe生成程序 直接运行软件目录下GZFrameworkCodeGenerate.exe文件即可 2.基于VS插件生成 目录中分为两部分:全局缓存和VS插件 1.添加全局 ...

  6. 《BI那点儿事》数据流转换——条件性拆分

    根据条件分割数据是一个在数据流中添加复杂逻辑的方法,它允许根据条件将数据输出到其他不同的路径中.例如,可以将TotalSugar< 27.4406的输出到一个路径,TotalSugar > ...

  7. js 默认选中分页条件项

    <table border="0" cellspacing="0" cellpadding="0" height="100% ...

  8. Java内存分配

    概述 对从事C和C++的程序员来说,在内存管理方面,他们既是拥有最高权利的人,也是从事最基础工作的“劳动人民”. 而对于Java程序员来说,JVM自动进行内存管理,程序员不再需要为每一个new操作去写 ...

  9. oracle中如何创建dblink

    当用户要跨本地数据库,访问另外一个数据库表中的数据时,本地数据库中必须创建了远程数据库的dblink,通过dblink本地数据库可以像访问本地数据库一样访问远程数据库表中的数据.下面讲介绍如何在本地数 ...

  10. 51nod 1412 AVL树的种类(dp)

    题目链接:51nod 1412 AVL树的种类 开始做的时候把深度开得过小了结果一直WA,是我天真了.. #include<cstdio> #include<cstring> ...