如何让CSS Grid中所有子元素触发鼠标移动的3D倾斜效果？

我用JavaScript实现鼠标hover时的3D倾斜效果，已经搭好CSS Grid布局，效果能运行，但目前仅作用于Grid容器的第一个div元素，怎么让所有子元素都触发该效果？

问题原因 #

你当前使用document.querySelector('.card > div')只会选中匹配选择器的第一个元素，所以只有第一个div能触发倾斜效果。要让所有子元素生效，需要选中所有目标元素并逐个绑定事件。

修改后的代码 #

JavaScript部分 #

// 选中所有.card下的div子元素
const cards = document.querySelectorAll('.card > div');

// 遍历每个元素，绑定鼠标事件
cards.forEach(card => {
  // 鼠标移动时触发倾斜效果
  card.addEventListener("mousemove", (e) => {
    rotateElement(e, card);
  });
  // 鼠标离开时重置元素状态（可选，提升交互体验）
  card.addEventListener("mouseleave", () => {
    card.style.transform = 'perspective(500px) rotateX(0deg) rotateY(0deg)';
  });
});

function rotateElement(e, card){
  const x = e.pageX;
  const y = e.pageY;

  const middleX = window.innerWidth / 2;
  const middleY = window.innerHeight / 2;

  const offsetX = (1 * ((x - middleX) / middleX) * 15).toFixed(2);
  const offsetY = (-1 * ((y - middleY) / middleY) * 15).toFixed(2);

  card.style.transform = `perspective(500px) rotateX(${offsetY}deg) rotateY(${offsetX}deg)`;
}

CSS和HTML部分（无需修改） #

body {
  display: flex;
  width: 100%;
  min-height: 100vh;
  align-items: center;
  justify-content: space-evenly;
  background-color: #000;
}
.card {
  display: grid;
  border-radius: 10px;
  width: 400px;
  height: 500px;
  font-size: 1.75rem;
  background-color: #e84393;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transform: perspective(1000px);
}

.card > div{
  position:relative;
  width: 150px;
  height: 150px;
  background-color: rgb(255, 247, 247);
  transform: perspective(500px);
  z-index: 9999;
}

<body>   
   <div class="card">
    <div class="ahaha"></div>
    <div class="ahaha"></div>
    <div class="ahaha"></div>
  </div>
 <script src="tilt.js"></script>
</body>

内容的提问来源于stack exchange，提问作者klob0t