CSS3之transition&transform

参考网页：

CSS3 transform 属性使用详解：

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

利用CSS3的transition属性制作过渡效果的导航栏： 

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内核的浏览器（Chrome，Sarari）支持较好

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);

 

兼容性

兼容：Chrome、Firefox、Opera等。

不兼容：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。