>dom ~~~ <div id="element"></div> ~~~ >css ~~~ body {width: 100vw;height: 100vh;display: flex;transform-style: preserve-3dperspective: 500px;cursor: pointer;} div {margin: auto;width: 200px;height: 200px;background: #000;transform-style: preserve-3d;} ~~~ >js ~~~ const multiple = 20; const mouseOverContainer = document.getElementsByTagName("body")[0]; const element = document.getElementById("element"); function transformElement(x, y) { let box = element.getBoundingClientRect(); let calcX = -(y - box.y - (box.height / 2)) / multiple; let calcY = (x - box.x - (box.width / 2)) / multiple; element.style.transform = "rotateX("+ calcX +"deg) "+ "rotateY("+ calcY +"deg)"; } mouseOverContainer.addEventListener('mousemove', (e) => { window.requestAnimationFrame(function(){ transformElement(e.clientX, e.clientY); }); }); ~~~