3D 如何在移动鼠标时倾斜背景图像以改变视角？
[英]How to 3D tilt a background image to change the perspective as you move the mouse?
问题描述
如何将 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>
1 个解决方案
解决方案1
3 已采纳 2020-07-18 09:47:58
通过结合 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的值以增加灵敏度。
如何模拟D3中的鼠标移动，以便在拖动节点时其他节点自动移动？
[英]How to simulate mouse move in D3 so when you drag nodes, other nodes move automatically?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.