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

标签：http   os   io   使用   ar   for   问题   sp   on   

ransform: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在手机上显示有锯齿的解决方案

标签：http   os   io   使用   ar   for   问题   sp   on   

原文地址：http://www.cnblogs.com/sunshq/p/3955466.html