css中的元素旋转

时间:2009年09月03日作者:愚人码头查看次数:4,446 views评论次数:1

先来看看这个图片:

text-rotation

这是一个日期的展现,其中2009就是通过元素旋转实现的。

原文在这里:http://snook.ca/archives/html_and_css/css-text-rotation(翻译:http://bbs.lampbrother.net/thread-13138-1-1.html

这里是html代码:


<div>
  <span>31</span>
  <span>July</span>
  <span>2009</span>
</div>

旋转的css:


-webkit-transform: rotate(-90deg);//Safari 4+,Google Chrome 1+
-moz-transform: rotate(-90deg);//Firefox 3.5+
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);//ie

虽然它目前不算是CSS3中的一部分,但Webkit已经有了它自己的一套变形属性,Mozilla也在效仿。变形包含了很多不同类型的值,不过其中最有意思也是最有用的就是旋转了包括任意的旋转角度。

可以看看ff的官方文档:https://developer.mozilla.org/en/CSS/-moz-transform

Safari 和Google Chrome 可以看看:http://www.the-art-of-web.com/css/css-animation/http://webkit.org/blog/138/css-animation/

ie则需要滤镜,只能旋转4个角度,看这里:http://msdn.microsoft.com/en-us/library/ms532918(VS.85).aspx

opera目前还没有什么类似的属性。

 

以下是通过js实现的办法:

http://css-tricks.com/date-display-with-sprites/

http://lucassmith.name/pub/calendar/stamp.html

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《css中的元素旋转

如果你读了我的文章,觉得有帮助: 说明
标签:分类:html+css
1条评论
  1. Tlm々锋留言于:2009年09月05日19:14

    很好的文章·~学习了

    [回复]

发表评论

*

*