transform—切割輪播圖

效果演示：

 

一、結構分析

第一步：在一個div裏面有顯示圖片的ul標籤（1個）和左右切換的a標籤（2個）；

第二步：ul標籤中有5個li標籤，li標籤浮動，每一個li標籤的寬度佔ul寬度的五分之一，高度爲100%，每個li標籤都有4個span標籤，span和li的寬高相等，span標籤表明li標籤的上下先後4個面，設置每個span的背景圖片，每一個span標籤都顯示圖片的五分之一。

每個li的樣式：

5個li標籤浮動組成的樣式（我只畫了一個右邊徹底的li標籤樣式）：

第三步：給a標籤設置寬高而且定位到合適的位置，

第四步：js註冊給a標籤註冊點擊事件：先在點擊事件外設置索引值，例如：index=0；

而後在點擊事件裏面，經過jQuery插件，獲取li標籤$('ul li')，給li標籤添加過渡效果{'transition':'all 1s'}；其中all表明：{'transform':'rotateX( '+ angel +'deg)'}，而且調用each（function（i,e）{}）函數，設置從左到右的每個li標籤的過渡效果延時0.5 * i s。

each(function(i,e){
        var delay = 0.5 * i;
        $(this).css({'transition':delay + 's'});
});

二、代碼實現

第一步，建立標籤

  <div class="box">
    <ul>
      <li><span></span><span></span><span></span><span></span></li>
      <li><span></span><span></span><span></span><span></span></li>
      <li><span></span><span></span><span></span><span></span></li>
      <li><span></span><span></span><span></span><span></span></li>
      <li><span></span><span></span><span></span><span></span></li>
    </ul>
    <a href="javascript:;" class="prev"> &lt; </a>
    <a href="javascript:;" class="next"> &gt; </a>
  </div>

第二步，設置CSS樣式

  <style>
     // 設置盒子居中，而且定位
    .box {
      margin: 100px auto;
      width: 600px;
      height: 380px;
      position: relative;
    }
    // 清除ul，li默認值
    ul,li {
      margin: 0;
      padding: 0;
    }
    // 設置ul絕對定位
    .box ul {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    // 設置li標籤的寬高，浮動標籤在一行上顯示，設置轉換爲立體效果transform-style: preserve-3d;
    .box ul li {
      float: left;
      list-style: none;
      width: 120px;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
    }
    // 設置左右a標籤的樣式，而且定位和合適位置
    .box>a {
      width: 30px;
      height: 50px;
      line-height: 50px;
      display: block;
      color: aliceblue;
      font-size: 30px;
      text-align: center;
      text-decoration: none;
      position: absolute;
      top: 160px;
      background-color: rgba(0, 0, 0, 0.6);
    }
    .box>a.prev {
      left: 0;
    }
    .box>a.next {
      right: 0;
    }
    // 設置每個li標籤裏的span的大小和li標籤同樣大，
    .box li span {
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      left: 0;
      top: 0px;
      background-repeat: no-repeat;
    }
    // 設置每一列span的背景圖片的顯示位置（每個span佔圖片大小的五分之一，在每一列顯示圖片的不一樣位置，從而達到顯示完整圖片的做用）
    .box ul li:nth-child(1) span {
      background-position: 0 0;
    }
    .box ul li:nth-child(2) span {
      background-position: -120PX 0;
    }
    .box ul li:nth-child(3) span {
      background-position: -240px 0;
    }
    .box ul li:nth-child(4) span {
      background-position: -360px 0;
    }
    .box ul li:nth-child(5) span {
      background-position: -480px 0;
    }
    // 設置每個li的第幾個span爲相同的背景圖片
    // 注意：背景圖片的尺寸必須和.box盒子同樣大
    .box li span:nth-child(1) {
      background-image: url('./images/A.jpg');
      transform: rotateZ(190px);
    }
    .box li span:nth-child(2) {
      background-image: url('./images/N.jpg');
      transform: rotateX(90deg) translateZ(190px);
    }
    .box li span:nth-child(3) {
      background-image: url('./images/Q.jpg');
      transform: rotateX(180deg) translateZ(190px);
    }
    .box li span:nth-child(4) {
      background-image: url('./images/S.jpg');
      transform: rotateX(-90deg) translateZ(190px);
    }
  </style>

第三步：JS代碼實現

  <script>
      // 自定義索引【輪播圖的核心】
    var index = 0;
     // 設置鎖，防止頻繁點擊出現輪播混亂
    var flag = true;
    $('.prev').on('click',function(){
        // 若是爲false，停止程序執行
      if(!flag) return;
        // 若是爲true把鎖鎖住，變成false
      flag = false;
        // 索引減一
      index--;
        // 點擊一下設置旋轉90度
      var angel = -index * 90;
        // 設置旋轉的css樣式
        // each：回調函數擁有兩個參數：第一個爲對象的成員或數組的索引，第二個爲對應變量或內容。
      $('ul li').css({'transition':'all 1s'}).css({'transform':'rotateX( '+ angel +'deg)'}).each(function(i,e){        // 設置每個li的延遲時間
        var delay = 0.5 * i;
        $(this).css({'transition':delay + 's'});
      });
    });
    $('.next').on('click',function(){
      if(!flag) return;
      flag = false;
      index++;
      var angel = -index * 90;
      $('ul li').css({'transition':'all 1s'}).css({'transform':'rotateX( '+ angel +'deg)'}).each(function(i,e){
        var delay = 0.5 * i;
        $(this).css({'transition':delay + 's'});
      });
    });
    // 執行完一次輪播把鎖打開
    $('ul li:last').on('transitionend', function () {
        /*開鎖*/
        flag = true;
    });
  </script>