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);}
.cut li div:nth-of-type(4){background: #2354D7;transform: rotateX(-90deg) translateZ(150px);}
.page a{display: block;height: 70px;width: 40px;background: rgba(0,0,0,0.2);text-decoration:none;color: #fff;
   font-size: 26px;line-height: 70px;text-align: center;position: absolute;top: 50%;margin-top: -35px;}
.page a:hover{background: rgba(0,0,0,0.5);}
.page .left{border-radius: 0 3px 3px 0;}
.page .right{right: 0;border-radius: 3px 0 0 3px;}
style>

<div class="wrap">
   <ul class="cut">
      <li>
         <div>div>
         <div>div>
         <div>div>
         <div>div>
      li>
      <li>
         <div>div>
         <div>div>
         <div>div>
         <div>div>
      li>
      <li>
         <div>div>
         <div>div>
         <div>div>
         <div>div>
      li>
      <li>
         <div>div>
         <div>div>
         <div>div>
         <div>div>
      li>
      <li>
         <div>div>
         <div>div>
         <div>div>
         <div>div>
      li>
      <li>
         <div>div>
         <div>div>
         <div>div>
         <div>div>
      li>
   ul>
   <div class="page">
      <a href="javascript:;" class="left"><a>
      <a href="javascript:;" class="right">>a>
   div>
div>

2、jQuery部分

<script>
   $(function(){
      var $t = null,$num=0;
      var $clis = $('.cut li');
      $clis.each(function(index,target){
         $(target).children('div').css('backgroundPosition',-600/6*index + 'px');
         $(target).css('transition', index*0.2 +'s');//设置旋转的时间
      });
      function move(){
         $clis.css('transform','rotateX('+ $num*90 +'deg)');
      }
      function autoMove(){
         clearInterval($t);//在运行一个计时器前先清除计时器
         $t = setInterval(function(){
            $num++;
            move();
         },5000);
      }
      autoMove();//进入页面自动滚动
      $('.wrap').on('mouseenter',function(){
         clearInterval($t);
      }).on('mouseleave',function(){
         autoMove();
      });
      $('.right').on('click',function(){
         $num++;
         move();
      });
      $('.left').on('click',function(){
         $num--;
         move();
      });
      $(window).blur(function () {
         clearInterval($t);
      }).focus(function () {
         autoMove();
      });
   })
script>