首页
首页
 
社区内容
社区内容

cengjing1999

用css实现元素的旋转

  • 用css实现元素的旋转

    Mon, 30 Nov 2009 10:13:04 GMT

    首先看下面的图片: 这是一个日期的展现，其中2009就是通过元素旋转实现的。 这里是html代码：<div>#xa0;... >>查看详细

  • C#开源资源

    Wed, 18 Nov 2009 02:41:19 GMT

    NET平台下的单元测试组件。 EasyMock.NET是由Java实现的EasyMock到.net平台的一个移植版本的一组类库。它... >>查看详细

  • 生死魄力

    Sun, 15 Nov 2009 11:16:27 GMT

    早上开始雨就一直的淅淅沥沥。还好我是阳刚型选手，阴冷潮湿等负面的东西近不得身。中午吃过了饭就 去看房子了。准备换个窝。有的时候会有... >>查看详细

  • FlashDevelop开发流程

    Sat, 12 Sep 2009 05:01:18 GMT

    1.FlashDevelop开发流程 脱离Flash IDE，享受Coding的乐趣 2.前言之前我都是拿FlashDevelop... >>查看详细

  • 我的名字叫理想

    Fri, 04 Sep 2009 07:39:31 GMT

    依稀在梦里，你是一株小草。依稀在梦里，那无边的荒漠和零星的绿洲。依稀在梦里，没有猛烈的阳光，而有柔柔的风。 “我的名字叫理想。”你... >>查看详细

  • javascript 事件处理 IE和标准do...

    Wed, 02 Sep 2009 03:34:52 GMT

    一个事件其实在页面上 有多个元素相应事件处理,点击页面上的一个button,会发生什么?其实 是相当于先后点击了按钮,它的容器,及... >>查看详细

用css实现元素的旋转
cengjing1999   Mon, 30 Nov 2009 10:13:04 GMT

首先看下面的图片:

 

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

这里是html代码：

  1. <div> 
  2. &nbsp; <span>31</span> 
  3. &nbsp; <span>July</span> 
  4. &nbsp; <span>2009</span> 
  5. </div> 

旋转的css:

  1. -webkit-transform: rotate(-90deg);//Safari 4+,Google Chrome 1+  
  2. -moz-transform: rotate(-90deg);//Firefox 3.5+  
  3. 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目前还没有什么类似的属性。

标签:

css 

阅读 (643)     评论 (1)     收集 (0)