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。