Vue 使用CSS3 实现简单过渡动画

实现点击缩放、移动，鼠标点击移动完成旋转

<template>
  <div id="import-template" @mouseup.self="mouseUp">
    <ul class="box" @click="reset" @mousedown.self="mouseDown($event)" @mousemove="mouseMove($event)" @mouseup.self="mouseUp" ref="box">
      <li v-for="item in list" :key="item.id" :id="item.name" @click.stop="select(item.name, item.href)" :ref="item.name" >
        <img :src="item.url" alt="">
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'Index',
    data() {
      return {
       list: [
         {id: 1, url: require('@/assets/images/1.jpg'), href: 'https://www.baidu.com', name: 'first'},
         {id: 2, url: require('@/assets/images/2.jpg'), href: 'https://www.jd.com', name: 'second'},
         {id: 3, url: require('@/assets/images/3.jpg'), href: 'https://www.taobao.com', name: 'third'},
         {id: 4, url: require('@/assets/images/4.jpg'), href: 'https://www.163.com', name: 'fourth'},
         {id: 5, url: require('@/assets/images/5.jpg'), href: 'https://www.sina.com.cn', name: 'fifth'},
       ],
       flag: false,
       distance: ``,
      }
    },
    mounted() {
      delete sessionStorage.currentName
    },
    methods: {
      //鼠标按下
      mouseDown(e) {
        // let cX, cY, x, y
        // cX = e.clientX
        // cY = e.clientY
        // x = ( e.clientX / window.innerWidth ) * 2 - 1
        // y = - ( e.clientY / window.innerHeight ) * 2 + 1
        // console.log(cX, cY)
        // console.log(x, y)
        this.flag = true
        this.distance = e.clientX
      },
      //鼠标移动
      mouseMove(e) {
        if (this.flag) {
          let angle = e.clientX - this.distance
          if (angle >= 30 || angle <= -30) {
            this.mouseUp()
          } else {
            this.$refs.box.style.transition = `all 3s`
            this.$refs.box.style.transform = `rotateY(${-angle}deg)`
          }
        }
      },
      //鼠标抬起
      mouseUp() {
        this.flag = false
        this.distance = ``
      },
      //选中
      select(name, href) {
        this.$refs.box.style.transform = ``
        if (sessionStorage.currentName) {
          if (name != sessionStorage.currentName) {
            this.reset()
          } else {
            window.location.href = href
          }
        }
        sessionStorage.currentName = name
        this.$refs[name][0].className = `${name}-move-style z-index`
      },
      //重置
      reset() {
        this.$refs.first[0].className = ''
        this.$refs.second[0].className = ''
        this.$refs.third[0].className = ''
        this.$refs.fourth[0].className = ''
        this.$refs.fifth[0].className = ''
        delete sessionStorage.currentName
      }
    }
  }
</script>

<style scoped>
  #import-template {
    perspective: 600px;
    transform-style: preserve-3d;
  }
  .box {
    padding-top: 50px;
    width: 100%;
    height: 230px;
    display: flex;
    justify-content: space-between;
    perspective: 600px;
    /*transform-style: preserve-3d;*/
    /*backface-visibility: hidden;*/
  }
  .box li {
    height: 200px;
    transition: all 2s;
    cursor: pointer;
  }
  .box li img {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* 3D效果 */
  .box li#first {
    transform: rotateY(90deg) translateX(10px);
  }
  .box li#second {
    transform: rotateY(50deg) translateX(14px);
  }
  .box li#third {}
  .box li#fourth {
    transform: rotateY(-50deg) translateX(-14px);
  }
  .box li#fifth {
    transform: rotateY(-90deg) translateX(-10px);
  }

  .first-move-style {
    transform: translate(570px, 150px) scale(1.6)!important;
  }
  .second-move-style {
    transform: translate(284px, 150px) scale(1.6)!important;
  }
  .third-move-style {
    transform: translate(0, 150px) scale(1.6)!important;
  }
  .fourth-move-style {
    transform: translate(-284px, 150px) scale(1.6)!important;
  }
  .fifth-move-style {
    transform: translate(-570px, 150px) scale(1.6)!important;
  }

  .z-index {
    z-index: 999
  }

  /* 2D效果 */
  /*.box li#first {*/
  /*  transform: rotateY(20deg) skewY(-10deg) translateY(58px);*/
  /*}*/
  /*.box li#second {*/
  /*  transform: rotateY(20deg) skewY(-5deg) translate(-7px, 15px);*/
  /*}*/
  /*.box li#fourth {*/
  /*  transform: rotateY(-20deg) skewY(5deg) translate(7px, 15px);*/
  /*}*/
  /*.box li#fifth {*/
  /*  transform: rotateY(-20deg) skewY(10deg) translateY(58px);*/
  /*}*/

  /*.first-move-style {*/
  /*  transform: translate(570px, 150px) scale(1.6)!important;*/
  /*}*/
  /*.second-move-style {*/
  /*  transform: translate(284px, 150px) scale(1.6)!important;*/
  /*}*/
  /*.third-move-style {*/
  /*  transform: translate(0, 150px) scale(1.6)!important;*/
  /*}*/
  /*.fourth-move-style {*/
  /*  transform: translate(-284px, 150px) scale(1.6)!important;*/
  /*}*/
  /*.fifth-move-style {*/
  /*  transform: translate(-570px, 150px) scale(1.6)!important;*/
  /*}*/

  /* 测试样式 */
  /*.box li#first {*/
  /*  transform: rotateY(25deg) skewY(10deg);*/
  /*}*/
  /*.box li#second {*/
  /*  transform: rotateY(20deg) skewY(5deg) translate(-7px, 40px);*/
  /*}*/
  /*.box li#third {*/
  /*  transform: translateY(52px);*/
  /*}*/
  /*.box li#fourth {*/
  /*  transform: rotateY(-20deg) skewY(-5deg) translate(7px, 40px);*/
  /*}*/
  /*.box li#fifth {*/
  /*  transform: rotateY(-25deg) skewY(-10deg);*/
  /*}*/

  /*.first-move-style {*/
  /*  transform: translate(570px, 150px) scale(1.2)!important;*/
  /*}*/
  /*.second-move-style {*/
  /*  transform: translate(284px, 150px) scale(1.2)!important;*/
  /*}*/
  /*.third-move-style {*/
  /*  transform: translate(0, 150px) scale(1.2)!important;*/
  /*}*/
  /*.fourth-move-style {*/
  /*  transform: translate(-284px, 150px) scale(1.2)!important;*/
  /*}*/
  /*.fifth-move-style {*/
  /*  transform: translate(-570px, 150px) scale(1.2)!important;*/
  /*}*/
</style>