求助：实现产品卡片hover旋转效果，仅首个元素生效问题排查

你代码里的核心问题是：在forEach循环中使用document.querySelector(".product-card__image")，这个方法只会返回页面中第一个匹配该选择器的元素。所以不管你循环到哪个卡片，事件最终都绑定到了第一个产品图片上，自然只有第一个卡片能触发旋转效果。

把获取图片元素的代码改成在当前卡片容器（cardWrapper）内部查找，这样每个卡片都会绑定自己对应的图片元素：

$(document).ready(function() {
    // DOM Element selections
    var cardWrapper = document.querySelectorAll(".product-card");

    cardWrapper.forEach(function(cardWrapper) {
        // 关键修改：在当前cardWrapper内部查找图片元素
        var card = cardWrapper.querySelector(".product-card__image");

        // highest values for angle
        var mostX = 10; // 10 or -10
        var mostY = 10; // 10 or -10

        cardWrapper.addEventListener("mousemove", (e) => {
            // remove transition
            card.style.transition = "none";

            var x = e.offsetX;
            var y = e.offsetY;
            var { width, height } = cardWrapper.getBoundingClientRect();
            var halfWidth = width / 2;
            var halfHeight = height / 2;

            // calculate angle
            var rotationY = ((x - halfWidth) / halfWidth) * mostX;
            var rotationX = ((y - halfHeight) / halfHeight) * mostY;

            // set rotation
            //card.style.transform = `rotateY(${rotationY}deg) rotateX(${rotationX}deg)`;
            card.style.transform = `rotateY(0deg) rotateX(0deg) rotateZ(-20deg) scale(1.2)`;

        });

        cardWrapper.addEventListener("mouseleave", () => {
            // add transition back
            card.style.transition = "transform 0.5s ease-in-out";
            card.style.transform = `rotateY(0) rotateX(0)`;
        });

    });
});

• querySelector作用于document时，会从整个文档树查找；作用于具体DOM元素时，只会在该元素的子节点范围内查找，这正是我们需要的效果。
• 如果你后续要恢复根据鼠标位置计算角度的旋转效果，只需要把注释掉的那行transform代码恢复即可。

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