一、前面的感慨
以前也陸陸續(xù)續(xù)試過CSS3的一些特性，文字投影，多邊框等。但都是試試而已，知道有這么回事。今天，見到了一個新玩意，transition，認認真真的試了一下，經(jīng)過，我懵了，我呆了，我傻了，半天說不出話來，這…這…unbelievable，amazing，太神奇了，太不可思議了，幾行簡單的CSS，如此炫酷的動畫效果，flash都不及的動畫效果，我真是難以表達我的心情。
下面由淺入深，使用純CSS，一步一步實現(xiàn)圖片墻動畫效果。這里，必須要先說明一下：對于對于此transition效果，IE6,IE7,IE8瀏覽器可以回家過元旦節(jié)了，這里沒有它們的事情，F(xiàn)irefox3雖然平時表現(xiàn)不錯，這里也沒有它的事情。這個效果最拿手的是chrome2瀏覽器，Safari4，也就是webkit家族，這里Firefox3.5勉強湊合，有盒陰影和旋轉(zhuǎn)效果，但是沒有動畫。所以，下文陸續(xù)提供的demo頁面僅適用于chrome瀏覽器和Safari瀏覽器，部分適用于Firefox3.5+，IE純粹的觀眾。
二、基礎(chǔ)練習 – 實現(xiàn)旋轉(zhuǎn)與盒投影效果
在CSS3中，實現(xiàn)旋轉(zhuǎn)效果需要用到transform屬性中的rotate屬性；實現(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);
上面代碼部分，首先應該知道的是webkit表示webkit核心的瀏覽器，是其私有屬性，作用于chrome和Safari瀏覽器，moz是Firefox瀏覽器的私有屬性。transform中文意思轉(zhuǎn)換，含有多個屬性值，其中rotate表示旋轉(zhuǎn)，其他一些屬性如scale-尺寸放大縮小（本文將會用到），skew表示傾斜角度，translate表移動距離。例如，本例中，rotate(10deg)表示順時針旋轉(zhuǎn)10度，如果要逆時針旋轉(zhuǎn)，使用負值就可以了。
box-shadow表示盒陰影，其有四個參數(shù)，第一個參數(shù)表示水平偏移，例如2px表示投影右偏移2像素，第二個參數(shù)表示垂直偏移，2px表示投影向下偏移2像素，第三個參數(shù)表示模糊的大小，第四個參數(shù)為rgba顏色值，例如 rgba(135, 139, 144, 0.4)，括號內(nèi)四個值分別指代r(red),g(green),b(blue),a(opacity)，這里表示透明度為40%的一種灰色。
上面代碼在Safari瀏覽器下的表現(xiàn)如下：
如果您當前瀏覽器為Safari3.5+，或是chrome，Safari，您可以狠狠地點擊這里：基礎(chǔ)旋轉(zhuǎn)投影效果demo
三、使用transition給單個圖片添加懸停動畫
有別于上面基礎(chǔ)效果CSS代碼，這里需要添加一個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屬性有這幾個值：
transition-property :* //指定過渡的性質(zhì)，比如transition-property:backgrond 就是只指定backgound參與這個過渡
transition-duration:*//指定這個過渡的持續(xù)時間
transition-delay:* //延遲過渡時間
transition-timing-function:*//指定過渡類型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
熟悉flash顯示與動畫編程的應該知道，這里的過渡類型的含義與flash中緩動類型（遠不及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.w3.org/TR/css3-transitions/#transition-timing-function_tag。
transition還支持CSS偽類。
所以，-webkit-transition:all 0.5s ease-in表示的意思就是所有的屬性都執(zhí)行過渡效果，像角度啊，投影大小，邊框色或是下面要講到的比例啦等，執(zhí)行時間為0.5秒，過渡動畫類型為先慢后快。
如果您當前瀏覽器為Safari3.5+，或是chrome，Safari，您可以狠狠地點擊這里：單張圖片的鼠標懸停旋轉(zhuǎn)動畫demo
四、多張美女圖的transition旋轉(zhuǎn)效果
上面講的是一張圖片的鼠標懸停旋轉(zhuǎn)效果，現(xiàn)在我們在頁面上放它個十幾張圖片，層疊排列，豈不是很酷。見下圖：
核心的CSS代碼與上面的一致，多的就是種圖片的絕對定位布局了。這里不多說。
如果您當前瀏覽器為Safari3.5+，或是chrome，Safari，您可以狠狠地點擊這里：多張圖片的鼠標懸停旋轉(zhuǎn)動畫demo
五、單張圖片的旋轉(zhuǎn)拉近動畫效果
這里對動畫效果做了進一步的升級，更酷了。描述為：鼠標經(jīng)過圖片，圖片不僅旋轉(zhuǎn)，而且圖片的投影拉長，圖片比例變大，于是形成了圖片從墻面上浮起來的炫酷效果。
如果您當前瀏覽器為Safari3.5+，或是chrome，Safari，您可以狠狠地點擊這里：單張圖片的旋轉(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);加大了投影的偏移，以及模糊的大小，同時投影的顏色也加深了。另外就是transform:rotate(0deg) scale(1.05);增加了scale屬性，scale(1.05)表示1.05倍于原來的尺寸顯示。而這些變化在webkit核心的瀏覽器下都是動畫顯示的，于是就有了圖片的拉伸懸浮效果。
六、最后的圖片墻懸浮超酷動畫
現(xiàn)在講單個圖片的懸浮效果應用到15個美女圖片上，就有了本文最終的美女圖片墻的圖片旋轉(zhuǎn)懸浮動畫效果了。
如果您當前瀏覽器為Safari3.5+，或是chrome，Safari，您可以狠狠地點擊這里：圖片墻旋轉(zhuǎn)懸浮效果demo
每張美女圖片所在的a標簽采用絕對定位，鼠標經(jīng)過改變z-index層級使其頂層顯示。有了CSS3，實現(xiàn)效果就是這么簡單。
七、最后自己的些總結(jié)
我是很興奮啊，不過寫到這里，我的腎上腺素貌似又回到了正常水平，雖說CSS3的一些特性真是非常的好，但是，并不是很完美的說。首先，瀏覽器的支持，要是所有的瀏覽器都支持transition，那才真正的普天同慶，但不知還要等多久。即使chrome瀏覽器支持transform的旋轉(zhuǎn)，但是，您可能注意到了，旋轉(zhuǎn)圖片的鋸齒很明顯，文字也是扭曲（Firefox下尤為明顯）了。
關(guān)于transition，如果您有興趣，可以去w3c去看一看，里面有相對比較詳細的介紹：http://www.w3.org/TR/css3-transitions/
總之，CSS3中蘊含的潛力無限，等著您我挖掘探尋了……
原創(chuàng)文章，轉(zhuǎn)載請注明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
