CSS3 3D變換幻燈片
新版的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不是主菜

浙公網安備 33010602011771號