body {

    width: 100vw;

    height: 100vh;

    display: flex;

    transform-style: preserve-3d;

    perspective: 500px;

    cursor: pointer;

}

​

#element {

    margin: auto;

    width: 250px;

    height: 250px;

    background: #000;

    border-radius: 10px;

    transform-style: preserve-3d;

    transition: all .1s;

}

const multiple = 10;

const mouseOverContainer = document.getElementsByTagName("body")[0];

const element = document.getElementById("element");

​

function transformElement(x, y) {

    let box = element.getBoundingClientRect();

    const calcX = -(y - box.y - box.height / 2) / multiple;

    const calcY = (x - box.x - box.width / 2) / multiple;

    const percentage = parseInt((x - box.x) / box.width * 1000) / 10;

    element.style.transform = "rotateX(" + calcX + "deg) " + "rotateY(" + calcY + "deg)";

}

​

mouseOverContainer.addEventListener("mousemove", (e) => {

    window.requestAnimationFrame(function () {

        transformElement(e.clientX, e.clientY);

    });

});

​

mouseOverContainer.addEventListener("mouseleave", (e) => {

    window.requestAnimationFrame(function () {

        element.style.transform = "rotateX(0) rotateY(0)";

    });

});

​