script.js

let myPanel = document.querySelector("#home");
let subpanel = document.querySelector(".container");

myPanel.onmousemove = transformPanel;
myPanel.onmouseenter = handleMouseEnter;
myPanel.onmouseleave = handleMouseLeave;

let mouseX, mouseY;

let transformAmount = 3;

function transformPanel(mouseEvent) {
    mouseX = mouseEvent.pageX;
    mouseY = mouseEvent.pageY;

    const centerX = myPanel.offsetLeft + myPanel.clientWidth / 2;
    const centerY = myPanel.offsetTop + myPanel.clientHeight / 2;

    const percentX = (mouseX - centerX) / (myPanel.clientWidth / 2);
    const percentY = -((mouseY - centerY) / (myPanel.clientHeight / 2));

    subpanel.style.transform = "perspective(400px) rotateY(" + percentX * transformAmount + "deg) rotateX(" + percentY * transformAmount + "deg)";
}

function handleMouseEnter() {
    // setTimeout(() => {
    //     subpanel.style.transition = "";
    // }, 100);
    // subpanel.style.transition = "transform 0.1s";
}

function handleMouseLeave() {
    // subpanel.style.transition = "transform 0.1s";
    // setTimeout(() => {
    //     subpanel.style.transition = "";
    // }, 100);
    subpanel.style.transform = "perspective(400px) rotateY(0deg) rotateX(0deg)";
}