<iframe src="https://code.juejin.cn/pen/7476023831896555574" width="100%" height="500px"></iframe>

逻辑代码部分

// 鼠标移入事件  
    doMousemove(event,index){ 
      this.currentIndex = index;
      this.$nextTick(()=>{ 
        // 获取卡片dom节点
        const cardRef = this.$refs[`cardRef${index}`][0]   
        const lightRef = this.$refs['lightRef'][0] 
        const x = event.pageX - cardRef.offsetLeft, y = event.pageY - cardRef.offsetTop; 
        // 获取发光节点 
        if(lightRef) { 
          const size = 180
          lightRef.style.width = `${size}px` 
          lightRef.style.height = `${size}px` 
          lightRef.style.left = `${x-size/2}px` 
          lightRef.style.top = `${y-size/2}px`   
        }
        // 设置动画效果
        if(cardRef){ 
          const maxRotation = 5 // X&Y轴旋转角度 
          const rangeSize = 120 // X&Y轴旋转的范围 
          const rotateX = ((x - rangeSize) / rangeSize) * maxRotation // 根据鼠标在 Y 轴上的位置计算绕 X 轴的旋转角度
          const rotateY = -1 * ((y - rangeSize) / rangeSize) * maxRotation // 根据鼠标在 X 轴上的位置计算绕 Y 轴的旋转角度 
          cardRef.style.transform = `perspective(800px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)` //设置 3D 透视
        }
      }) 
    },
    // 鼠标移出事件
    doMouseleave(index){
      this.currentIndex=-1 
      const cardRef = this.$refs[`cardRef${index}`][0]  
      cardRef.style.transform = `perspective(800px) rotateX(0deg) rotateY(0deg)` 
    }  
  }