如上GIF所示，這次模擬的是切換3D特效，因為在之前開發過程中，產品有不同的需求，swiper有些功能不是很適用，所以就按照需求自己寫了這種功能的效果。

具體原理是運用css裡面的:

transform:totateY、translateZ、scale
所以希望大家對這幾個css樣式有一定的瞭解和認識。

具體是根據切換的索引值，動態的為每一個DOM元素新增不同的位置和比列，這樣就可以很簡單的實現上圖效果，具體程式碼如下,為了方便我們統一用vue框架進行處理，當然有需要也可以拆除來當原生去使用。

如上圖是此功能的DOM結構樹，這裡運用v-for進行了5個主題的迴圈。下面是兩個左右按鈕的點選切換。

其中list是我們規定好的位置，key值分別對應其css樣式,我們這裡用到了陣列的分割，嘿嘿~需要大家好好想一想為什麼要這樣。只要理解了我圈住的那一個地方的程式碼，那這個功能就算是真的理解透了，在最後我們用forEach給每一個dom元素重新賦值就大功告成了.

說了這麼多廢話我估計你們是直接想ctrlC ctrlV吧，哈哈哈，話不多上上程式碼。

<style>  //-------這裡是頁面的CSS樣式
    *{
        padding:0;
        margin: 0;
        font-size: 0;
    }
    .app{
        width: 500px;
        height: 500px;
        margin: 0 auto;
        margin-top: 200px;
        overflow: hidden;
    }
    .cente {
        height: 130px;
        width: 140px;
        transform-style: preserve-3d;
        transition: all 0.8s;
        box-sizing: border-box;
        position: relative;
        margin: 0 auto;
        margin-top: 200px;
    }
  .onu {
        width: 120px;
        height: 130px;
        box-shadow: 0px 4px 13px 0px rgba(97, 38, 5, 0.2);
        position: absolute;
        background: url('../img/1.jpg') no-repeat;
        background-position: center;
        background-size: 100%;
      transition-property: transform;
      transition-duration: 0.6s;
    }
 .img_li {
        width: 100%;
        height: 85%;
        position: relative;
    }
    .img_li img {
        width: 70%;
        position: absolute;
        top: 11px;
        left: 21px;
    }
   .tisz {
        position: absolute;
        min-width: 33px;
        height: 16px;
        line-height: 17px;
        /*background-image: url('../img/1.png');*/
       background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        right: 1px;
        top: 8px;
        font-size: 14px;
        font-weight: bold;
        color: #240e1b;
        text-align: center;
    }
    .sp_li {
        font-size: 16px;
        font-weight: 400;
        color: #240e1b;
        display: inline-block;
        width: 100%;
        height: 20%;
        line-height: 20%;
        text-align: center;
    }
 .cente .onu:nth-child(1) {
        transform: rotateY(0deg) translateZ(1000px) scale(1);
    }
    .cente .onu:nth-child(2) {
        transform: rotateY(3deg) translateZ(952px) scale(0.9);
        /*opacity: 0.8;*/
    }
 .cente .onu:nth-child(3) {
        transform: rotateY(5deg) translateZ(950px) scale(0.8);
        /*opacity: 0.8;*/
    }
    .cente .onu:nth-child(4) {
        transform: rotateY(-5deg) translateZ(950px) scale(0.8);
        /*opacity: 0.8;*/
    }
    .cente .onu:nth-child(5) {
        transform: rotateY(-3deg) translateZ(952px) scale(0.9);
        /*opacity: 0.8;*/
    }
/*    按鈕*/
    button{
        font-size: 20px;
        margin-left: 20px;
        margin-right: 20px;
    }
    .twos{
        margin: 0 auto;
        margin-top: 50px;
        text-align: center;

    }

<div class="app"> //-----------這裡是DOM結構
<!--所有的顯示-->
<div @touchstart="chstart" @touchmove="chmove" @touchend="chend"  class="cente">
    <div ref="every" v-for="(v,i) in 5" class="onu">
        <div class="img_li">
            <!-- 旁邊的帶子 -->
            <img src="../模擬vue/img/1.png" alt="">
            <div class="tisz">X{{i+1}}</div>
        </div>
        <span class="sp_li">初級福袋</span>
    </div>

</div>
    <!--左前進和右前進-->
    <div class="twos">
        <button @click="btn(1)" type="button">左邊</button>
        <button @click="btn(0)" type="button">右邊</button>
    </div>
    <!---->
</div>

var vm = new Vue({
        el : '.app',
        data : {
            img_list: [img_path+'1.png'],
            msg : '文案',
            data_list :{
                list : [
                    {rotateY : 0,transfolaZ :1000,size : 1},
                    {rotateY : 3,transfolaZ :952,size : 0.9},
                    {rotateY : 5,transfolaZ :950,size : 0.8},
                    {rotateY : -5,transfolaZ :950,size : 0.8},
                    {rotateY : -3,transfolaZ :952,size : 0.9}
                ],
            },
            chmove_lsit :[],//記錄所有移動中的值
            start_x :0
        },
        methods : {
            btn : function (inder) {//點選切換
                var dom;
                const Doms = this.$refs['every'];
               if(inder){//右邊切換
                        dom =   this.data_list['list'].splice(0,1);
                        this.data_list['list'].push(dom[0]);
                    }else {//左邊切換
                        dom =   this.data_list['list'].splice(this.data_list['list'].length-1);
                        this.data_list['list'].unshift(dom[0])
                    }
                this.data_list['list'].forEach((v,i)=>{
                    Doms[i].style.transform = ' rotateY(' + v['rotateY'] + 'deg) translateZ(' + v['transfolaZ'] + 'px) scale(' + v['size'] + ')'
                })
             },
            chstart : function (e) {//拖拽開始
                var ev = e || window.event;
                var touch = ev.targetTouches[0];
                this.start_x = touch.pageX;
            },
            chmove : function (e) {//拖拽中
                var ev = e || window.event;
                var touch = ev.targetTouches[0];
                this.chmove_lsit.push(touch.pageX);
            },
            chend : function (e) {//拖拽結束
                var ev = e || window.event;
                var touch = ev.changedTouches[0];
                if(this.chmove_lsit.length<1||this.chmove_lsit[this.chmove_lsit.length-2]==touch.pageX){
                    return ;
                }
                if(this.chmove_lsit[this.chmove_lsit.length-2]>touch.pageX){
                    this.btn(0)
                }else {
                    this.btn(1)
                }
                console.log(this.set_tiem);

                this.chmove_lsit = []
            }
        }
    });

　　這裡就是完整的JS程式碼，這裡橘色部分只是點選左右進行切換，餘下部分是移動端的拖拽，程式碼還不完全可以適用，不過可以簡單實現移動端的拖拽功能，所以如果碼工們需要可以自行進行調整和修改，

好了今天的分享就到此為止，我們下次再見。