3D постер со слежением за курсором

<!--SH11 - Модификация для Тильды. 3D-постер со слежением за курсором https://mod.tistols.com/3d-poster -->
<style>
tistols-main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    perspective: 1000px;
}
#tistols__poster {
    aspect-ratio: 14/9;
    background: center / cover no-repeat url('https://static.tildacdn.com/tild6639-6632-4830-a661-336432393366/Frame_21839.svg');
    width: 100%;
    max-width: 100%;
    position: relative;
    animation: move 10s 0s infinite;
    transform-style: preserve-3d;
    border-radius: 25px;
}
#tistols__poster__header {
    position: absolute;
    top: 34%;
    left: 0;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    transform: translateZ(30px);
    transform-style: preserve-3d;
}
#tistols__poster__header__title {
    font-size: 100px;
    position: absolute;
    margin: 0;
    white-space: nowrap;
    background-image: url('https://static.tildacdn.com/tild6366-3134-4131-a563-323830303039/Frame_21841.jpg');
    background-size: cover;
    background-position: center;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
#tistols__poster__header__title::before {
    content: attr(data-title);
    position: absolute;
    color: #ffc61c5e;
    -webkit-text-fill-color: initial;
    mix-blend-mode: overlay;
    opacity: 1;
    text-shadow: 0px 0px 2px rgba(0,0,0,0.4), 1px 1px #bf4528;
}
#tistols__poster__front_image {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    transform: translateZ(80px);
    transform-style: preserve-3d;
    filter: drop-shadow(0px 0px 10px) rgba(0,0,0,0.1);
    border-radius: 25px;
}

#tistols__poster__lt {
    font-size:15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #00100b;
    text-shadow: 0px 0px 2px rgba(0,0,0,0.7);
    position: absolute;
    bottom: 5%;
    left: 5%;
    transform: translateZ(30px);
    transform-style: preserve-3d;
    margin: 0;
}
#tistols__poster__rt {
    font-size:15px;
    letter-spacing:1px;
    text-transform: uppercase;
    color: #00100b;
    text-shadow: 0px 0px 2px rgba(0,0,0,0.7);
    position: absolute;
    bottom: 5%;
    right: 5%;
    transform: translateZ(30px);
    transform-style: preserve-3d;
    margin: 0;
}
#tistols__poster__under {
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    color: white;
    letter-spacing: 1px;
    width: 100%;
    position: absolute;
    top: 15%;
    left: 0%;
    transform: translateZ(30px);
    transform-style: preserve-3d;
    margin: 0;
}

#tistols__poster__sub {
    display: flex;
    justify-content: space-between;
    font-size: 25px;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    position: absolute;
    top: 40%;
    left: 0%;
    width: 100%;
    margin: 0;
    transform: translateZ(30px);

}
#tistols__poster__sub > span {
    display: flex;
    background-image: url('https://static.tildacdn.com/tild6366-3134-4131-a563-323830303039/Frame_21841.jpg');
    background-size: cover;
    background-position: center;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
#tistols__poster__sub > span::before {
    content: attr(data-title);
    position: absolute;
    color: #ffc61c5e;
    -webkit-text-fill-color: initial;
    mix-blend-mode: overlay;
    opacity: 1;
    text-shadow: 0px 0px 4vmin rgba(0,0,0,0.4), 1px 1px #bf4528;
}

</style>
<script>
     document.addEventListener('mousemove', function(e) {
            const poster = document.getElementById('tistols__poster');
            const rect = poster.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            const centerX = rect.width / 2;
            const centerY = rect.height / 2;
            const percentX = (x - centerX) / centerX;
            const percentY = (y - centerY) / centerY;

            const maxRotateY = 30;
            const maxRotateX = 10;

            const rotateY = Math.min(Math.max(percentX * maxRotateY, -maxRotateY), maxRotateY);
            const rotateX = Math.min(Math.max(-percentY * maxRotateX, -maxRotateX), maxRotateX);

            poster.style.transform = `rotateY(${rotateY}deg) rotateX(${rotateX}deg)`;
        });
</script>

<!--SH11 - Модификация для Тильды. 3D-постер со слежением за курсором https://mod.tistols.com/3d-poster -->
<tistols-main>
    <article id="tistols__poster">
   <img id="tistols__poster__front_image" src="https://static.tildacdn.com/tild6566-3539-4130-b961-373931313232/Group_21818.jpg" alt="3D-постер">
     </article>    
</tistols-main>