Javascript 图像库中的3D鼠标移动效果

我试图复制像这个网站一样的图片库的效果

也许有人可以帮助我，我尝试了各种解决方案，其中一种是用jquery编写的

$(".gallery").on('mousemove', function(e){
   centerX = $(this).width();
   let moveX = centerX - e.offsetX;
   $(this).css({'transform':'perspective(500px) rotateY('+ moveX/100+ 'deg)'})
})

---

我在研究这个问题时做的第一件事就是删除jQuery。请随意更改，但至少对我来说，我更熟悉本机浏览器API

以下是我最终得到的代码：

document.querySelector(".gallery").onmousemove = function(e) {
   centerX = e.target.getBoundingClientRect().width / 2;
   let moveX = centerX - e.offsetX;
   e.target.style.transform = `rotateY(${moveX / 4}deg) perspective(500px)`;
};

如果没有您正在使用的完整DOM，很难确定到底出了什么问题。然而，在玩的时候，我确实注意到了两件可能会解释你的麻烦的事情：

• 当您在转换的元素之外时，不会调用

  onmousemove

  事件。这意味着移动鼠标产生效果的区域会随着时间的推移而减少
• 你不能把中心坐标除以二。这意味着你得到的是从右边的偏移量
• 除非这个元素很大，否则100的比例因子太大了

至少，我认为您应该考虑使用某种容器元素来跟踪鼠标及其偏移量

---

我希望所有这些都能有所帮助。如果你明白了，就告诉我

就像@Oliver Dunk所说的，没有DOM很难判断出什么是错的。我认为有解决办法。看起来只有当透视属性位于元素的母元素上时，效果才会起作用。这看起来是可行的：

$（“img”）.on（'mousemove'，函数（e）{
centerX=$（this）.width（）；
centerY=$（this）.height（）；
moveX=centerX-e.offsetX；
moveY=centerY-e.offsetY；
$（“#输出”）.text（moveX）
$（this.css（{'transform'：'rotateY（'+moveX/100+'deg）rotateX（'+moveY/10+'deg）}）
})

div{perspective:100px；padding:100px；}
img{边框：1px实心橙色}

---

是否应将

centerX

设置为

Math.floor（$（this.width（）/2）

？这将代表图像的中心。另外，为什么要用

moveX

除以

100

？你很可能会旋转很小的度数。