CSS3之transition&tran
参考网页：
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。