新版的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不是主菜