// @property --per {

//   syntax: '<percentage>';

//   inherits: false;

//   initial-value: 30%;

// }

body {

    width: 100vw;

    height: 100vh;

    display: flex;

    transform-style: preserve-3d;

    perspective: 500px;

    cursor: pointer;

    background: #000;

}

​

#element {

    margin: auto;

    width: 250px;

    height: 400px;

    background: #000;

    border-radius: 10px;

    transform-style: preserve-3d;

    transition: all .1s;

    // background: linear-gradient(45deg, black, deeppink, #6006ff);

}

​

#g-img {

    position: relative;

    width: 100%;

    height: 100%;

    background: 

        url('https://key-drop.com/cdn-cgi/image/format=auto,width=270,dpr=2/uploads/skins/JAINA.png');

    background-size: cover;

    background-position: center;

    border-radius: 10px;

    filter: brightness(1.2);

    &::after {

        content: "";

        display: none;

        position: absolute;

        inset: 0;

        border-radius: 10px;

        background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/13471/sparkles.gif");

        mix-blend-mode: color-dodge;

    }

    &::before {

        content: "";

        display: none;

        position: absolute;

        inset: 0;

        border-radius: 10px;

        background: 

            linear-gradient(115deg, 

                transparent 0%, 

                #06e8ff var(--per), 

                #ffab2e calc(var(--per) + 25%), 

                #ff2212 calc(var(--per) + 50%),

                transparent 100%);

        mix-blend-mode: overlay;

    }

    &:hover::after,

    &:hover::before {

        display: block;

    }

}

const multiple = 10;

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

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

const img = document.getElementById("g-img");

​

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)";

    img.style = `--per: ${percentage}%`;

}

​

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)";

    });

});

​