js实现3D图片展示效果

点击左上角的按钮前后切换

效果图：

代码如下：

 
 

*{margin:0; padding:0; list-style:none;}
ul{ 
 width:300px; 
 height:300px;
 margin:100px auto;
 position:relative;
 -webkit-transform-style:preserve-3d;
 perspective:800px;
}
ul li{
 position:absolute;
 top:0; left:0;
 width:100%;
 height:100%;
 text-align:center;
 line-height:300px;
 font-size:50px;
 background:#399;
 border:1px solid #000;
 opacity:0;
}
.l2{
 opacity:0;
 -webkit-transform: translate(-280px,0) rotateY(45deg);
 z-index:3;
}
.l1{
 opacity:1;
 -webkit-transform: translate(-220px,0) rotateY(45deg);
 z-index:4;
}
.cur{ 
 opacity:1;
 -webkit-transform:translateZ(50px);
 z-index:5;
}
.r1{
 opacity:1;
 -webkit-transform: translate(220px,0) rotateY(-45deg);
 z-index:4;
}
.r2{
 opacity:0;
 -webkit-transform: translate(280px,0) rotateY(-45deg);
 z-index:3;
}