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. 卸载cygwin

    1.下载takeown.exe(貌似win自带,你可以打开cmd 输入takeown.exe查看,貌似不行)所以还是去网上下载吧,亲测http://download.csdn.net/download ...

  2. 结对编程—黄金点游戏WinForm单机版

    本小游戏场景来自邹欣老师的<移山之道>一书: "阿超的课都是下午两点钟,这时班上不少的同学都昏昏欲睡,为了让大家兴奋起来,阿超让同学玩一个叫"黄金点"的游戏: ...

  3. Android 图片的放大缩小拖拉

    package com.example.ImageView; import android.annotation.SuppressLint; import android.content.Contex ...

  4. Unix网络编程--卷二：FAQ

    1.编译unpipc库. 执行./configure时报错: checking host system type... Invalid configuration `x86_64-pc-linux-g ...

  5. CyclicBarrier和CountDownLatch的差别

    CyclicBarrier和CountDownLatch都用多个线程之间的同步,共同点:同时有N个线程在 CyclicBarrier(CountDownLatch) 等待上等待时,CyclicBarr ...

  6. 【前端】Web前端学习笔记【1】

    ... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...

  7. Oracle求连续的年份

    SELECT ('2013') + ROWNUM year FROM dualCONNECT BY ROWNUM <= 2;

  8. C# 调用 Outlook发送邮件实例

    添加引用:Microsoft.Office.Interop.Outlook using System; using System.Collections.Generic; using System.L ...

  9. NetBeans IDE配置调试

    1.首先需要下载xdebug,在网址中http://www.xdebug.org/download.php可据实际配置环境下载,当然有的Apache安装后已经安装该项,就不必作处理: 2.配置php. ...

  10. 视频播放器之————JW Player参数详解

    JW Player参数详解 1,安装 下载后,你可以得到一个例子,当用文本或HTML编辑器打开的时候,你可以发现swf是用一段短小的 javascript嵌入到页面上的.这个Javascript是Ge ...