Javascript 如何在移动鼠标时三维倾斜背景图像以更改透视图？

如何向背景图像添加3D倾斜，以便在移动鼠标时图像的透视图发生变化？我将在画廊墙上的一幅艺术作品的插图上使用它，所以我希望它能够根据鼠标的位置倾斜，就像从房间的不同部分观看一样

身体{
背景图像：url（“https://c1.wallpaperflare.com/preview/442/138/421/art-gallery-canvas-arts-gallery.jpg");
背景位置：50%50%；
高度：100vh；
背景重复：无重复；
}

通过组合css

透视图

和

变换

属性，我们可以实现类似的功能

document.querySelector（'.image holder img'）.addEventListener（'load'，（事件）=>{
设cordinates=document.querySelector（'.image holder img'）.getBoundingClientRect（）；
让imageX=（cordinates.left+window.scrollX+cordinates.right）/2；
让imageY=（cordinates.top+window.scrollY+cordinates.bottom）/2；
常数角_补偿=10；
document.querySelector（“.image holder”）.addEventListener（'mousemove'，（事件）=>{
让mouseX=event.clientX；
让mouseY=event.clientY；
设xOffset=imageX-mouseX；
让yOffset=imageY-mouseY；
设X旋转角度=Y偏移/角度补偿；
让旋转角度=X偏移/角度补偿；
document.querySelector（'.image holder img'）.style.transform=“rotateX（+xRotationAngle+“deg”）rotateY（+yRotationAngle+“deg）”
})
})

body.图像支架{
透视图：2000px；
利润率：20px；
}

太棒了，谢谢！还有一件事，我怎样才能反转y轴，使其以与上面例子中相反的方向移动？只要将-1乘以需要反转的任何方向即可。像这样

让yRotationAngle=xOffset/ANGLE_COMPENSATION*-1