vue中img跟随鼠标移动实现3d效果

 <div class="home-page" ref="homeRef" @mousemove="handleMouseMove">
    <div class="home-page-img" :style="imgStyle">
      <img src="@/assets/img/home.png" alt="" class="responsive-img"  />
    </div>
 </div>
 
 const imgStyle = ref({
  transform: 'perspective(1200px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)',
});
 
const handleMouseMove = (event: MouseEvent) => {
  const { clientX, clientY } = event;
  const x = (clientX / window.innerWidth - 0.5) * 30; // 计算 X 轴旋转角度
  const y = (clientY / window.innerHeight - 0.5) * -30; // 计算 Y 轴旋转角度
  imgStyle.value.transform = `perspective(1200px) rotateX(${y}deg) rotateY(${x}deg) scale3d(1, 1, 1)`; // 更新样式
};
 
  .home-page-img {
    width: 100%; /* 使容器宽度为 100% */
    max-width: 800px; /* 设置最大宽度 */
    height: auto; /* 高度自动 */
    margin: 0 auto;
    transition: transform 0.1s; /* 平滑过渡 */
    transform-style: preserve-3d; /* 保持 3D 变换 */
    perspective: 1200px; /* 设置透视效果 */
 
    .responsive-img {
      width: 100%; /* 图片宽度为 100% */
      height: auto; /* 高度自动，保持比例 */
    }
  }