先来看演示效果

首先我们设置一个这样的图片样式

<template>
    <div class="login100-pic">
      <img src="../static/images/img-01.png" alt="IMG"/>
    </div>
</template>

<style>
.login100-pic {
  width: 316px;
}

.login100-pic img {
  max-width: 100%;
}
</style>

原本我是设置了一个监听鼠标事件

  mounted() {
    document
      .querySelector(".login100-pic")
      .addEventListener(`mousemove`, this.mouseMove);
  },

当鼠标移入这个div时就执行 mouseMove 函数

<script>
export default {
  data() {
    return {
  },
  methods: {
    mouseMove: function (e) {
        //鼠标移入事件
    },
  },
  mounted() {
  },
};
</script>

但实际实现后却发现了一个问题，这个问题先暂时不表，先看看 mouseMove() 怎么实现

let x = e.offsetX; //相对元素的X偏移量
let y = e.offsetY; //相对元素的Y偏移量
let x1 = img.offsetWidth;//元素的宽度
let y1 = img.offsetHeight;//元素的高度

获得鼠标在元素内的坐标和元素的高度和宽度，因为我们要将图片变换，所以要用到CSS中的 transform ，默认是以元素中心为原点，所以我们要算出中心点的坐标和鼠标位置的偏移量后除以20防止图片变形过度，再将css设置上去。

mouseMove: function (e) {
  let x = e.offsetX; //相对元素的X偏移量
  let y = e.offsetY; //相对元素的Y偏移量
  let img = document.querySelector(".login100-pic");
  let x1 = img.offsetWidth;//元素的宽度
  let y1 = img.offsetHeight;//元素的高度
  document.querySelector(".login100-pic").style.cssText += "will-change: transform";
  document.querySelector(".login100-pic").style.cssText += `transform:perspective(300px) rotateX(${(x1 / 2 - x) / 20}deg) rotateY(${(y1 / 2 - y) / 20}deg) scale3d(1.1,1.1,1.1)`;
}

鼠标移出后图片也要复原，所以设置一个移出时调用的函数

mouseLeave: function () {
  document.querySelector(
    ".login100-pic"
  ).style.transform ="perspective(300px) rotateX(0deg) rotateY(0deg)";
}

这个时候我们回到之前的问题，使用这种方法会出现动画卡顿的情况，因为监听事件是循环调用的，在循环中你移动鼠标就会出现卡顿的情况，所以我们之间用 @mousemove="mouseMove" 来代替 mounted() 这样就可以解决卡顿问题了。

<template>
    <div class="login100-pic" @mousemove="mouseMove" @mouseleave="mouseLeave">
      <img src="../static/images/img-01.png" alt="IMG"/>
    </div>
</template>