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

 

转载于:https://www.cnblogs.com/trance/archive/2013/01/04/2844506.html