注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

谈笑涧

已开通独立前端博客,请访问 http://www.candoudou.com

 
 
 

日志

 
 

css3实现图片旋转  

2012-03-13 15:50:36|  分类: html5+css3 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
transform属性有很多用法,其中一个就是translate(旋转)。translate就是基于角度转动一个对象并可用于内联元素和块级元素,它可以实现很酷的效果。 

淘宝网使用css3和HTML5已经很长时间了,淘宝的这个图标旋转好像只支持webkit内核的浏览器,其实IE下用滤镜也可以实现。 
img{        -webkit-transform: rotate(-90deg);        -moz-transform: rotate(-90deg);        -o-transform: rotate(-90deg);        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);  }  

请注意在IE8中(非标准模式)它需要你写成“-ms-filter”而不是“filter”。


浏览器支持 

浏览器对translate的支持令人惊奇的广泛。在上面的CSS片段中,我们直接加上-webkit-和-moz-前缀然后将#nav元素旋转-90度。 
相当简单吧?唯一的问题是对于一个相当重要的设计元素,如果IE不支持,很多设计师就会不情愿使用它。 
幸运的是,IE有这方面的滤镜:图形旋转滤镜。它可以有4个旋转值:0, 1, 2,和3。你将不会获得和Webkit和Gecko一样的精密控制,但是至少在一定程度上保持统一(甚至IE6)。虽然这个滤镜只支持4个值,显得有些鸡肋,但是对于IE来说,聊胜于无吧。 
另外,非常值得一提的是,Opera在前几天发布了Opera 10.50 pre版本,声称支持CSS3 的transition和transform。只是还是需要使用私有属性,也就是要使用前缀 -o- 

 

谈笑涧推荐阅读:
  评论这张
 
阅读(602)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017