Vue<正方体指向鼠标效果>

效果图：

代码如下：

<template>
  <div class="overall" @mousemove="move">
    <div class="block">
      <div id="face" class="q"></div>
      <div id="face" class="s"></div>
      <div id="face" class="z"></div>
      <div id="face" class="y"></div>
      <div id="face" class="h"></div>
      <div id="face" class="x"></div>
    </div>
  </div>
</template>

<script>
import { TweenLite } from "gsap";
export default {
  data() {
    return {
      w: window.innerWidth,
      h: window.innerHeight
    };
  },
  methods: {
    move(e) {
      let box = document.querySelector(".block");
      let shadow = document.querySelector(".shadow");
      let x = (e.clientX - this.w / 2) * 0.1;
      let y = (e.clientY - this.h / 2) * 0.1;
      TweenLite.to(box, 0.3, {
        ease: Back.easeOut.config(1.7),
        rotationY: x,
        rotationX: -y
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.overall {
  perspective: 1000px;
  background: #f0f0f0;
}
.block {
  transform-style: preserve-3d;
  width: 100px;
  height: 100px;
  position: absolute;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
  z-index: 9;
  perspective: 5000px;

  #face {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    opacity: 0.5;
  }
  .q {
      background: rgb(39, 98, 226);
    transform: translateZ(50px);
  }
  .s {
      background: rgb(39, 198, 226);
    transform-origin: 0% 0%;
    transform: rotateX(-90deg) translateY(-50px);
  }
  .z {
      background: rgb(39, 226, 123);
    transform-origin: 0% 50%;
    transform: rotateY(90deg) translateX(-50px);
  }
  .y {
      background: rgb(226, 76, 39);
    transform-origin: 100% 50%;
    transform: rotateY(-90deg) translateX(50px);
  }
  .h {
      background: rgb(111, 39, 226);
    transform: translateZ(-50px);
  }
  .x {
      background: rgb(226, 39, 86);
    transform-origin: 50% 100%;
    transform: rotateX(90deg) translateY(50px);
  }
}
</style>