功能介紹web前端的技術學習(html,css,js)每天進步一小步，人生進步一大步！
工具/原料
電腦
堅持和耐心
方法/步驟
一、前面的感慨以前也陸陸續續試過CSS3的一些特性，文字投影，多邊框等。但都是試試而已，知道有這麼回事。今天，見到了一個新玩意，transition，認認真真的試了一下，經過，我懵了，我呆了，我傻了，半天說不出話來，這…這…unbelievable，amazing，太神奇了，太不可思議了，幾行簡單的CSS，如此炫酷的動畫效果，flash都不及的動畫效果，我真是難以表達我的心情。
下面由淺入深，使用純CSS，一步一步實現圖片牆動畫效果。這裡，必須要先說明一下：對於對於此transition效果，IE6,IE7,IE8瀏覽器可以回家過元旦節了，這裡沒有它們的事情，Firefox3雖然平時表現不錯，這裡也沒有它的事情。這個效果最拿手的是chrome2瀏覽器，Safari4，也就是webkit家族，這裡Firefox3.5勉強湊合，有盒陰影和旋轉效果，但是沒有動畫。所以，下文陸續提供的demo頁面僅適用於chrome瀏覽器和Safari瀏覽器，部分適用於Firefox3.5+，IE純粹的觀眾。
二、基礎練習 – 實現旋轉與盒投影效果在CSS3中，實現旋轉效果需要用到transform屬性中的rotate屬性；實現盒陰影效果需要使用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中文意思轉換，含有多個屬性值，其中rotate表示旋轉，其他一些屬性如scale-尺寸放大縮小（本文將會用到），skew表示傾斜角度，translate表移動距離。例如，本例中，rotate(10deg)表示順時針旋轉10度，如果要逆時針旋轉，使用負值就可以了。box-shadow表示盒陰影，其有四個引數，第一個引數表示水平偏移，例如2px表示投影右偏移2畫素，第二個引數表示垂直偏移，2px表示投影向下偏移2畫素，第三個引數表示模糊的大小，第四個引數為rgba顏色值，例如 rgba(135, 139, 144, 0.4)，括號內四個值分別指代r(red),g(green),b(blue),a(opacity)，這裡表示透明度為40%的一種灰色。
上面程式碼在Safari瀏覽器下的表現如下：
三、使用transition給單個圖片新增懸停動畫有別於上面基礎效果CSS程式碼，這裡需要新增一個transition的樣式，告訴瀏覽器，這裡要有動畫效果。先看一下此相關的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); }
程式碼部分最關鍵的就是：-webkit-transition:all 0.5s ease-in;目前而言，transition僅webkit核心的瀏覽器支援，所以此效果僅在chrome或是Safari下有。transiton屬性有這幾個值：transition-property :* //指定過渡的性質，比如transition-property:backgrond 就是隻指定backgound參與這個過渡transition-duration:*//指定這個過渡的持續時間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的某些特定數值。比如ease-in-out的型別它也可以寫成cubic-bezier(0.42, 0, 0.58, 1.0)。參見這裡。transition還支援CSS偽類。
所以，-webkit-transition:all 0.5s ease-in表示的意思就是所有的屬性都執行過渡效果，像角度啊，投影大小，邊框色或是下面要講到的比例啦等，執行時間為0.5秒，過渡動畫型別為先慢後快。
四、多張美女圖的transition旋轉效果上面講的是一張圖片的滑鼠懸停旋轉效果，現在我們在頁面上放它個十幾張圖片，層疊排列，豈不是很酷。見下圖：
核心的CSS程式碼與上面的一致，多的就是種圖片的絕對定位佈局了。這裡不多說。
五、單張圖片的旋轉拉近動畫效果這裡對動畫效果做了進一步的升級，更酷了。描述為：滑鼠經過圖片，圖片不僅旋轉，而且圖片的投影拉長，圖片比例變大，於是形成了圖片從牆面上浮起來的炫酷效果。
核心的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程式碼，您會發現，這裡的CSS的hover部分發生了些變化，首先增加的盒陰影樣式，box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);加大了投影的偏移，以及模糊的大小，同時投影的顏色也加深了。另外就是transform:rotate(0deg) scale(1.05);增加了scale屬性，scale(1.05)表示1.05倍於原來的尺寸顯示。而這些變化在webkit核心的瀏覽器下都是動畫顯示的，於是就有了圖片的拉伸懸浮效果。
六、最後的圖片牆懸浮超酷動畫現在講單個圖片的懸浮效果應用到15個美女圖片上，就有了本文最終的美女圖片牆的圖片旋轉懸浮動畫效果了。每張美女圖片所在的a標籤採用絕對定位，滑鼠經過改變z-index層級使其頂層顯示。有了CSS3，實現效果就是這麼簡單。加群四一八加上三五五最後五三一瞭解更多web實戰知識。
七、最後自己的些總結我是很興奮啊，不過寫到這裡，我的腎上腺素貌似又回到了正常水平，雖說CSS3的一些特性真是非常的好，但是，並不是很完美的說。首先，瀏覽器的支援，要是所有的瀏覽器都支援transition，那才真正的普天同慶，但不知還要等多久。即使chrome瀏覽器支援transform的旋轉，但是，您可能注意到了，旋轉圖片的鋸齒很明顯，文字也是扭曲（Firefox下尤為明顯）了。
總之，CSS3中蘊含的潛力無限，等著您我挖掘探尋了……
注意事項
世界上最快樂的事情，莫過於為理想而奮鬥
人生需要主動