图片轮播—盒子翻转效果

炫酷的图片轮播

通过3D翻转效果，实现图片轮播

<template>
  <div id="carousel">
    <div class="block">
      <img v-for="item in img" :key="item" :src="item" :style="styleVar">
    </div>
    <ul>
      <li @click="a" :class="{active: index == 0}"></li>
      <li @click="b" :class="{active: index == 1}"></li>
      <li @click="c" :class="{active: index == 2}"></li>
      <li @click="d" :class="{active: index == 3}"></li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      img: [
        'https://pic3.zhimg.com/v2-cb8040f0ab6652ec6091eff75f5096d3_r.jpg?source=1940ef5c',
        'https://pic1.zhimg.com/v2-dc33c3e2a3664dffd5459bf832a8bacb_r.jpg?source=1940ef5c',
        'http://inews.gtimg.com/newsapp_bt/0/14119718995/1000',
        'https://pic1.zhimg.com/v2-f798ec3f3a171756cebf6491a4e45db3_r.jpg?source=1940ef5c'
      ],
      styleVar: {
        "--deg1": "0deg",
        "--deg2": "90deg",
        "--deg3": "180deg",
        "--deg4": "270deg"
     },
     deg: 0，
     timer: null,
     index: 0
    };
  },
  methods: {
    change() {
      if(this.deg == 270) {
        this.deg = -90
      }
      switch(this.deg) {
        case -90: this.index = 0; break;
        case 0: this.index = 1; break;
        case 90: this.index = 2; break;
        case 180: this.index = 3;break;
      }
      this.deg = this.deg + 90
      this.styleVar['--deg1'] = this.deg + 'deg'
      this.styleVar['--deg2'] = this.deg + 90 + 'deg'
      this.styleVar['--deg3'] = this.deg + 180 + 'deg'
      this.styleVar['--deg4'] = this.deg + 270 + 'deg'
    },
    a() {
      this.stop()
      this.deg = -90
      this.change()
      this.play()
    },
    b() {
      this.stop()
      this.deg = 0
      this.change()
      this.play()
    },
    c() {
      this.stop()
      this.deg = 90
      this.change()
      this.play()
    },
    d() {
      this.stop()
      this.deg = 180
      this.change()
      this.play()
    },
    play() {
      if(this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
      this.timer = setInterval(this.change, 3000)
    },
    stop() {
      clearInterval(this.timer)
      this.timer = null
    }
  },
  created() {
    this.play()
  }
}
</script>

<style scoped>
  #carousel {
    width: 100%;
    height: 580px;
    overflow: hidden;
  }
  .block {
    width: 1000px;
    height: 560px;
    margin: auto;
    display: flex;
    position: relative;
    transform-style: preserve-3d;
  }
  img {
    position: absolute;
    width: 1000px;
    height: 560px;
  }
  img:nth-child(1) {
    transform: rotateX(var(--deg1)) translateZ(280px);
    transition: transform 1s;
  }
  img:nth-child(2) {
    transform: rotateX(var(--deg2)) translateZ(280px);
    transition: transform 1s;
  }
  img:nth-child(3) {
    transform: rotateX(var(--deg3)) translateZ(280px);
    transition: transform 1s;
  }
  img:nth-child(4) {
    transform: rotateX(var(--deg4)) translateZ(280px);
    transition: transform 1s;
  }
  ul {
    width: 300px;
    display: flex;
    justify-content: space-evenly;
    margin: 5px auto;
    transform: translateZ(300px);
  }
  li {
    width: 50px;
    height: 5px;
    background: #949494;
  }
  li:hover {
    cursor:pointer
  }
  .active {
    background: cornflowerblue;
  }
</style>

运行效果

图片轮播—3D盒子翻转效果