一、前面的感慨
以前也陸陸續(xù)續(xù)試過CSS3的一些特性,，文字投影,，多邊框等。但都是試試而已,，知道有這么回事,。今天，見到了一個(gè)新玩意,，transition,，認(rèn)認(rèn)真真的試了一下，經(jīng)過,，我懵了,，我呆了，我傻了,，半天說不出話來,，這…這…unbelievable，amazing,，太神奇了,，太不可思議了，幾行簡單的CSS,，如此炫酷的動畫效果,，flash都不及的動畫效果，我真是難以表達(dá)我的心情,。

下面由淺入深,，使用純CSS,，一步一步實(shí)現(xiàn)圖片墻動畫效果。這里,，必須要先說明一下：對于對于此transition效果,，IE6,IE7,IE8瀏覽器可以回家過元旦節(jié)了，這里沒有它們的事情,，F(xiàn)irefox3雖然平時(shí)表現(xiàn)不錯(cuò),，這里也沒有它的事情。這個(gè)效果最拿手的是chrome2瀏覽器,，Safari4,，也就是webkit家族，這里Firefox3.5勉強(qiáng)湊合,，有盒陰影和旋轉(zhuǎn)效果，但是沒有動畫,。所以,，下文陸續(xù)提供的demo頁面僅適用于chrome瀏覽器和Safari瀏覽器，部分適用于Firefox3.5+,，IE純粹的觀眾,。

二、基礎(chǔ)練習(xí) – 實(shí)現(xiàn)旋轉(zhuǎn)與盒投影效果
在CSS3中,，實(shí)現(xiàn)旋轉(zhuǎn)效果需要用到transform屬性中的rotate屬性,；實(shí)現(xiàn)盒陰影效果需要使用box-shadow屬性。具體參見下面的示例代碼,。

-webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); transform:rotate(10deg);
-webkit-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -moz-box-shadow:2px 2px 3px 
   rgba(135, 139, 144, 0.4); box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4);

上面代碼部分,，首先應(yīng)該知道的是webkit表示webkit核心的瀏覽器，是其私有屬性,，作用于chrome和Safari瀏覽器,，moz是Firefox瀏覽器的私有屬性。
transform中文意思轉(zhuǎn)換,，含有多個(gè)屬性值,，其中rotate表示旋轉(zhuǎn)，其他一些屬性如scale-尺寸放大縮?。ū疚膶玫剑?，skew表示傾斜角度，translate表移動距離,。例如,，本例中，rotate(10deg)表示順時(shí)針旋轉(zhuǎn)10度,，如果要逆時(shí)針旋轉(zhuǎn),，使用負(fù)值就可以了,。
box-shadow表示盒陰影，其有四個(gè)參數(shù),，第一個(gè)參數(shù)表示水平偏移,，例如2px表示投影右偏移2像素，第二個(gè)參數(shù)表示垂直偏移,，2px表示投影向下偏移2像素,，第三個(gè)參數(shù)表示模糊的大小，第四個(gè)參數(shù)為rgba顏色值,，例如 rgba(135, 139, 144, 0.4),，括號內(nèi)四個(gè)值分別指代r(red),g(green),b(blue),a(opacity)，這里表示透明度為40%的一種灰色,。

上面代碼在Safari瀏覽器下的表現(xiàn)如下：

如果您當(dāng)前瀏覽器為Safari3.5+,，或是chrome，Safari,，您可以狠狠地點(diǎn)擊這里：基礎(chǔ)旋轉(zhuǎn)投影效果demo

三,、使用transition給單個(gè)圖片添加懸停動畫
有別于上面基礎(chǔ)效果CSS代碼，這里需要添加一個(gè)transition的樣式,，告訴瀏覽器,，這里要有動畫效果。先看一下此相關(guān)的CSS代碼：

.pic{
    display:block; width:256px; margin:60px 0 0; padding:10px 10px 15px; text-align:center;
    background:white; border:1px solid #bfbfbf;
    -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); transform:rotate(10deg);
    -webkit-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -moz-box-shadow:2px 2px 3px 
       rgba(135, 139, 144, 0.4); box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4);
    -webkit-transition:all 0.5s ease-in;
}
.pic:hover,.pic:focus,.pic:active{
    border-color:#9a9a9a; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); 
     transform:rotate(0deg);
}

代碼部分最關(guān)鍵的就是：-webkit-transition:all 0.5s ease-in;目前而言,，transition僅webkit核心的瀏覽器支持,，所以此效果僅在chrome或是Safari下有。
transiton屬性有這幾個(gè)值：
transition-property :* //指定過渡的性質(zhì),，比如transition-property:backgrond 就是只指定backgound參與這個(gè)過渡
transition-duration:*//指定這個(gè)過渡的持續(xù)時(shí)間
transition-delay:* //延遲過渡時(shí)間
transition-timing-function:*//指定過渡類型,，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

熟悉flash顯示與動畫編程的應(yīng)該知道，這里的過渡類型的含義與flash中緩動類型（遠(yuǎn)不及flash豐富）是一致的：
linear //線性過度
ease-in //由慢到快
ease-out //由快到慢
ease-in-out //由慢到快在到慢

額外的些知識：timing-funciton的幾種過度類型都是基于cubic-bezier的某些特定數(shù)值,。比如ease-in-out的類型它也可以寫成cubic-bezier(0.42, 0, 0.58, 1.0),。參見這里http://www./TR/css3-transitions/#transition-timing-function_tag。
transition還支持CSS偽類,。

所以,，-webkit-transition:all 0.5s ease-in表示的意思就是所有的屬性都執(zhí)行過渡效果，像角度啊,，投影大小,，邊框色或是下面要講到的比例啦等，執(zhí)行時(shí)間為0.5秒,，過渡動畫類型為先慢后快,。

如果您當(dāng)前瀏覽器為Safari3.5+，或是chrome，Safari,，您可以狠狠地點(diǎn)擊這里：單張圖片的鼠標(biāo)懸停旋轉(zhuǎn)動畫demo

四,、多張美女圖的transition旋轉(zhuǎn)效果
上面講的是一張圖片的鼠標(biāo)懸停旋轉(zhuǎn)效果，現(xiàn)在我們在頁面上放它個(gè)十幾張圖片,，層疊排列,，豈不是很酷。見下圖：

核心的CSS代碼與上面的一致,，多的就是種圖片的絕對定位布局了,。這里不多說。

如果您當(dāng)前瀏覽器為Safari3.5+,，或是chrome,，Safari，您可以狠狠地點(diǎn)擊這里：多張圖片的鼠標(biāo)懸停旋轉(zhuǎn)動畫demo

五,、單張圖片的旋轉(zhuǎn)拉近動畫效果
這里對動畫效果做了進(jìn)一步的升級,，更酷了。描述為：鼠標(biāo)經(jīng)過圖片,，圖片不僅旋轉(zhuǎn),，而且圖片的投影拉長，圖片比例變大,，于是形成了圖片從墻面上浮起來的炫酷效果。

如果您當(dāng)前瀏覽器為Safari3.5+,，或是chrome,，Safari，您可以狠狠地點(diǎn)擊這里：單張圖片的旋轉(zhuǎn)懸浮效果demo

核心的CSS代碼如下：

.pic{
    display:block; width:256px; margin:60px 0 0; padding:10px 10px 15px; text-align:center; 
       background:white; border:1px solid #bfbfbf;
    -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); transform:rotate(10deg);
    -webkit-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -moz-box-shadow:2px 2px 3px 
       rgba(135, 139, 144, 0.4); box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4);
    -webkit-transition:all 0.5s ease-in;
}
.pic:hover,.pic:focus,.pic:active{
    border-color:#9a9a9a;
    -webkit-box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4); -moz-box-shadow:15px 15px 20px 
       rgba(50, 50, 50, 0.4); box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);
    -webkit-transform:rotate(0deg) scale(1.05); -moz-transform:rotate(0deg) scale(1.05); 
          transform:rotate(0deg) scale(1.05);
}

對比三和五部分的CSS代碼,，您會發(fā)現(xiàn),，這里的CSS的hover部分發(fā)生了些變化，首先增加的盒陰影樣式,，box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);加大了投影的偏移,，以及模糊的大小，同時(shí)投影的顏色也加深了,。另外就是transform:rotate(0deg) scale(1.05);增加了scale屬性,，scale(1.05)表示1.05倍于原來的尺寸顯示。而這些變化在webkit核心的瀏覽器下都是動畫顯示的,，于是就有了圖片的拉伸懸浮效果,。

六、最后的圖片墻懸浮超酷動畫
現(xiàn)在講單個(gè)圖片的懸浮效果應(yīng)用到15個(gè)美女圖片上,，就有了本文最終的美女圖片墻的圖片旋轉(zhuǎn)懸浮動畫效果了,。
如果您當(dāng)前瀏覽器為Safari3.5+，或是chrome，Safari,，您可以狠狠地點(diǎn)擊這里：圖片墻旋轉(zhuǎn)懸浮效果demo
每張美女圖片所在的a標(biāo)簽采用絕對定位,，鼠標(biāo)經(jīng)過改變z-index層級使其頂層顯示。有了CSS3,，實(shí)現(xiàn)效果就是這么簡單,。

七、最后自己的些總結(jié)
我是很興奮啊,，不過寫到這里,，我的腎上腺素貌似又回到了正常水平，雖說CSS3的一些特性真是非常的好,，但是,，并不是很完美的說。首先,，瀏覽器的支持,，要是所有的瀏覽器都支持transition，那才真正的普天同慶,，但不知還要等多久,。即使chrome瀏覽器支持transform的旋轉(zhuǎn)，但是,，您可能注意到了,，旋轉(zhuǎn)圖片的鋸齒很明顯，文字也是扭曲（Firefox下尤為明顯）了,。

關(guān)于transition,，如果您有興趣，可以去w3c去看一看,，里面有相對比較詳細(xì)的介紹：http://www./TR/css3-transitions/

總之,，CSS3中蘊(yùn)含的潛力無限，等著您我挖掘探尋了……

原創(chuàng)文章,，轉(zhuǎn)載請注明來自張鑫旭-鑫空間-鑫生活[http://www.]