SOURCE

var demo = new Vue({
    'el': '#demo',
    data: {
        listArr: [{
            sty: `transform : rotateY(140deg) translateZ(60vw)`,
            src:'https://img0.baidu.com/it/u=2204341784,1935053274&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=508'
        }, {
            sty: `transform : rotateY(180deg) translateZ(60vw)`,
              src:'https://img0.baidu.com/it/u=1486623047,1550883052&fm=11&fmt=auto&gp=0.jpg'
        }, {
            sty: `transform : rotateY(220deg) translateZ(60vw)`,
              src:'https://img0.baidu.com/it/u=2733602645,1185314752&fm=26&fmt=auto&gp=0.jpg'
        }, {
            sty: ` display:none`,
              src:'https://img1.baidu.com/it/u=1714647179,1860705410&fm=26&fmt=auto&gp=0.jpg'
        }, {
            sty: ` display:none`,
              src:'https://img0.baidu.com/it/u=2007367712,1597794220&fm=26&fmt=auto&gp=0.jpg'
        }]
    },
    mounted() {

    },
    methods: {
        palyCenter(i) {


            this.listArr.forEach((item, index) => {
                if (index === i) {
                    item.sty = `transform : rotateY(180deg) translateZ(60vw)`
                }
                else if (index === (i - 1)) {
                    item.sty = `transform : rotateY(140deg) translateZ(60vw)`
                } else if (index === (i + 1)) {

                    item.sty = `transform : rotateY(220deg) translateZ(60vw)`
                }
                else {
                    item.sty = `display:none`
                }
                //边界判断
                if (i === this.listArr.length-1) {
                    this.listArr[0].sty = `transform : rotateY(220deg) translateZ(60vw)`
                }
                if (i === 0) {
                    this.listArr[this.listArr.length - 1].sty = `transform : rotateY(140deg) translateZ(60vw)`
                }
            })

        }
    },
    computed: {
        sty() {
            return (i) => {
                let r = 0
                if (i === 0) {
                    r = 140
                }
                if (i === 1) {
                    r = 180
                }
                if (i === 2) {
                    r = 220
                }
                if (i > 2) {
                    return `display:none`
                }
                return `transform : rotateY(${r}deg) translateZ(60vw)`
            }
        }
    }

});

<div id="demo">
	<div class="content">
		<div class="img-box" :style="item.sty" @click="palyCenter(index)" v-for="(item,index) in listArr" :key="index">
			<img   :src="item.src" alt="">
            <span class="item-index">{{index+1}}</span>
        </div>
    </div>
</div>

#demo{
/* background-color: #000; */
height: 100vh;
 perspective: 1600px;
}


.content{
    /* background-color: #000; */
   width: 300px;
     height:100vw;
     padding: 100px 0;
     margin:0 auto;
     transform-style: preserve-3d;
     /* transition: all .5s ease; */
}
.img-box{
     width: 30vw;
     height: 300px;
     margin-bottom: 100px;
    position: absolute;
     border: 1px solid gray;
     border-radius: 20px;
     opacity: 0.8;
     overflow: hidden;
     cursor: pointer;
     color: #fff;
     transition: all .5s ease;
}
.item-index{
 position: absolute;
 font-size: 30px;
 font-weight: 600;
 color: #fff;
left: 10vw;
z-index: 10;
 transform : rotateY(180deg) ;
}
 img{
     width: 100%;
     height: 100%;   
    transform : rotateY(180deg) ;
 }
/* @keyframes spin {
         from {
             transform: rotateY(0);
         }
         to {
             transform: rotateY(360deg);
         }
 } */