如何通过鼠标移动来倾斜3D背景图片以改变透视？

Question

如何通过鼠标移动来倾斜3D背景图片以改变透视？

4

如何给背景图像添加3D倾斜效果，以便当您移动鼠标时，图像的视角会发生变化？我将在画廊中使用此效果来展示一件墙上艺术品的插图，因此希望根据鼠标位置倾斜，就像您从房间的另一部分观看它一样。

<style>
body {
  background-image: url("https://c1.wallpaperflare.com/preview/442/138/421/art-gallery-canvas-arts-gallery.jpg");
  background-position: 50% 50%;
  height:100vh;
background-repeat:no-repeat;

}
</style>
<body>

- gjjr

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Prakhar · Accepted Answer

通过结合css的perspective和transform属性，我们可以实现类似以下的效果。

document.querySelector('.image-holder img').addEventListener('load', (event) => {

  let cordinates = document.querySelector('.image-holder img').getBoundingClientRect();
  let imageX = (cordinates.left + window.scrollX + cordinates.right) / 2;
  let imageY = (cordinates.top + window.scrollY + cordinates.bottom) / 2;

  const ANGLE_COMPENSATION = 10;
  document.querySelector('.image-holder').addEventListener('mousemove', (event) => {
    let mouseX = event.clientX;
    let mouseY = event.clientY;

    let xOffset = imageX - mouseX;
    let yOffset = imageY - mouseY;

    let xRotationAngle = yOffset / ANGLE_COMPENSATION;
    let yRotationAngle = xOffset / ANGLE_COMPENSATION;

    document.querySelector('.image-holder img').style.transform = "rotateX(" + xRotationAngle + "deg) rotateY(" + yRotationAngle + "deg) "

  })
})

body .image-holder {
  perspective: 2000px;
  margin: 20px;
}

<div class="image-holder">
  <img src="https://c1.wallpaperflare.com/preview/442/138/421/art-gallery-canvas-arts-gallery.jpg" />
</div>

将ANGLE_COMPENSATION的值减小可以增加灵敏度。