1. css3旋轉的例子:
2. css3動畫:
**部分最關鍵的就是：-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秒，過渡動畫型別為先慢後快。
css3動畫方塊旋轉
html translate x,y 基於原來的位置，沿x軸平移，長度為x，沿2軸平移，長度為ytransform translate x,y translatex x 基於原來的位置，沿x軸平移，長度為xtransform translatex x translatey y 基於原來的位置,沿y軸...
CSS3旋轉及動畫
一 css3轉換 1 元素的2d轉換 1 transform none 不進行轉換 2transform translate x,y 定義2dd轉換，移動 3transform translate3d x,y,z 定義3d轉換 4transform tranlatex value 使用x軸的值轉換 ...
CSS3動畫 3D旋轉
學了c3之後，簡單做了乙個3d旋轉的小demo.個人親猜測相容chrome firefox opera safari，沒有考慮ie。如果下面 有問題，可以在我的github檢視源 可以檢視網頁效果demo位址。如下 ccs3animation 3drotatetitle charset utf 8 ...