trance

新版的iTunes 已經用上了帥氣的 3D 感覺的圖片輪換頭圖。

感覺CSS3真是強大，雖然現在仍然需要寫一堆的前綴，這仍然不能阻礙它發揮威力。

http://css3lib.alloyteam.com/uilib/image_effects/3DGallery/index.html

這個例子也不錯，可以方便的分析。自己也隨手做了一個。

關鍵語句是以下幾句：

transform-style:preserve-3d;

perspective:1000px;

transition:all .5s ease-in-out;

transform:translateX(450px) translateZ(-300px) rotateY(-45deg);

設置五種變換class   ['outleft','clsleft','clscenter','clsright','outright']  

點擊切換的時候，依次給相應元素賦class值 配合 transition屬性 便可得到切換的效果。

腳本部分偷了個懶，簡要處理了5個圖片的情況。畢竟這會JS不是主菜