参考网页:

CSS3 transform 属性使用详解

http://www.renniaofei.com/code/css3-transform-shuxing-shiyong-xiangjie/ 

利用CSS3transition属性制作过渡效果的导航栏: 

http://www.renniaofei.com/code/css3-transition-daohanglan/ 

无脚本纯CSS3仿苹果选单

http://bbs.lanrentuku.com/thread-11945-1-1.html 

 

transition属性

W3C:http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag 

 

transition-property  /*指定参与过渡的属性*/

eg.transition-property:backgrond 只指定backgound参与这个过渡

transition-duration /*指定这个过渡的持续时间*/

transition-delay /*延迟过渡时间*/

transition-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier/*过渡类型*/

linear 线性过度 | ease-in 由慢到快 | ease-out 由快到慢| ease-in-out 由慢到快在到慢

 

eg.-webkit-transition:all 0.5s ease-in

表示的意思:

所有的属性都执行过渡效果,执行时间为0.5秒,过渡动画类型为先慢后快

 

兼容性:

webkit内核的浏览器(ChromeSarari)支持较好

mozilla内核的部分支持

IE不兼容

 

 

transform属性

transform本意是变换、改变的意思。

CSS3中包括三种含义,分别是rotate(旋转)、skew(扭曲)、scale(缩放)。

1.transform-rotate(旋转)

.transform–rotate {

  -moz-transform: rotate(10deg);  /*顺时针旋转7度。若要逆时针旋转,使用负值*/

  -webkit-transform: rotate(10deg);

}

2.transform-rotate(扭曲)

.transform–skew{

  -moz-transform: skew(-25deg);

  -webkit-transform: skew(-25deg);

}

3.transform-rotate(缩放)

.transform–scale {

  -moz-transform: scale(0.5);

  -webkit-transform: scale(0.5);

}

4.transform-translate(移动距离)

 

eg.

-webkit-transform: rotateX(15deg) scale(1.2) translate(0,10px);

-moz-transform:scale(1.2) translate(0,10px);

 

兼容性

兼容:ChromeFirefoxOpera等。

不兼容:IE8以下版本

IE8以下版本

可以通过IE滤镜来实现。代码如下:

<!--[if IE]>

<style>

.transform–rotate {

  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

  right:-15px; top:5px;

}

</style>

<![endif]-->

 

rotation取值[0,1,2,3],依次代表旋转 [0deg,90deg,180deg,270deg],有关BasicImage滤镜的说明请参考 BasicImage filter