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. SIP协议栈基础笔记

    //------------------SIP基础------------------------// SIP是基于UDP的协议 UA(user Agent)用户代理 UAC(client)发起SIP ...

  2. Mac平台上OpenCV开发环境搭建

    转载于:https://segmentfault.com/a/1190000000711132 linux 编译指定库.头文件的路径问题 http://blog.csdn.net/jiaweizou/ ...

  3. Android中插件开发篇之----类加载器

    关于插件,已经在各大平台上出现过很多,eclipse插件.chrome插件.3dmax插件,所有这些插件大概都为了在一个主程序中实现比较通用的功能,把业务相关或者让可以让用户自定义扩展的功能不附加在主 ...

  4. C++中虚析构函数的作用

    我们知道,用C++开发的时候,用来做基类的类的析构函数一般都是虚函数.可是,为什么要这样做呢?下面用一个小例子来说明:         有下面的两个类: class ClxBase { public: ...

  5. HBase之计数器

    HBase计数器 #创建counters表 列族['daily','weekly','monthly'] hbase(main):001:0> create 'counters','daily' ...

  6. rpc选择标准

    衡量RPC好用与否的几条标准: 真的像本地函数一样调用 使用简单,用户只需要关注业务即可 灵活,RPC调用的序列化方式可以自由定制,比如支持json,支持msgpack等方式 http://www.o ...

  7. python3 对文件的查找、替换、删除

    python 版本 3.5 实现对文件的查找,替换,删除 #Author by Andy #_*_ coding:utf-8 _*_ #定义查找函数 def find(): Keywords=inpu ...

  8. UIDatePicker的用法

    目录[-] 1.Locale 2.Calendar 3.timeZone 4.date 5.minimumDate 6.maximumDate 7.countDownDuration 8.minute ...

  9. 树(二)——二叉树

    目录 本章主要讲解内容为: 树的非递归遍历算法,两种版本 树的扩展前缀以及前缀中缀构建方法 源码 btree.cpp btree.h 基础知识 一.定义 二叉树的递归定义:二叉树是每个结点最多含有两棵 ...

  10. 0429 Scrum团队成立与第6-7章读后感

    Scrum团队成立: 团队名称:何首污大战污妖王 团队目标:每个人都尽可能的学到东西,共同进步. 团队口号:因为自信,所以成功! 团队照: 角色分配 产品负责人(梁毅乾): 决定开发内容和优先级排序, ...