CSS3+jQuery实现3D轮播图

1、HTML和css代码部分

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<style>    
*{
 margin:0; padding:0; list-style:none;}
.wrap{
 width: 600px;height: 300px;margin: 50px auto;    position: relative;}
.cut{
 width: 600px;height: 300px;margin: 50px auto;transform-style: preserve-3d;}
.cut li{
 width: 100px;height: 300px;float: left;    transform-style: preserve-3d;
   position: relative;}
.cut li div{
 height: 100%;width: 100%;position: absolute;}
.cut li div:nth-of-type(1){
 background: pink;transform: rotateX(0deg) translateZ(150px);}
.cut li div:nth-of-type(2){    background: #1EED7E;transform: rotateX(90deg) translateZ(150px);}
.cut li div:nth-of-type(3){
 background: #CBED1E;    transform: rotateX(180deg) translateZ(150px)