3D Parallax Card с Tilt и Slide эффектами на HTML, CSS и JS

See the Pen 3D Parallax Card with Tilt & Slide by Alexandre Vacassin (@alexandrevacassin) on CodePen.
HTML
<div class="card">
<div class="parallax-layer bg">
<img src="https://drive.google.com/thumbnail?id=1gjk_fcB6iho1oHmzY-10eSKIE9TpQisx&sz=w1000">
</div>
<div class="parallax-layer">
<img src="https://drive.google.com/thumbnail?id=1TK9pzfnoR_AHoyGopthRaQZsQWjbwMHH&sz=w1000">
</div>
<div class="parallax-layer">
<img src="https://drive.google.com/thumbnail?id=1yKj48wNNwg17-JecguxMASwDNvp65tCb&sz=w1000">
</div>
<div class="parallax-layer">
<img src="https://drive.google.com/thumbnail?id=1MDbZZfKIrKwLhTiYXl9im3OMwwNT0Wu2&sz=w1000">
</div>
<div class="parallax-layer">
<img src="https://drive.google.com/thumbnail?id=1jkpUucNkaQOPCLClpZKMdTdEzAYEszsn&sz=w1000">
</div>
<div class="parallax-layer">
<img src="https://drive.google.com/thumbnail?id=1G58IxzEgQnnWnd1vAdRmtQHfWpvb1Ipt&sz=w1000">
</div>
<div class="parallax-layer">
<img src="https://drive.google.com/thumbnail?id=1I7mg1tYxTI3EBpbNoRAXhzSua6n0XDDF&sz=w1000">
</div>
<div class="card-content">
<h1>The Forest</h1>
</div>
</div>
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background: #000;font-family: "Poppins", serif;font-weight: 700;}.card {position: relative;width: 350px;height: 566px;perspective: 1000px;overflow: hidden;border-radius: 32px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);background-color: #c4d9e9;}.parallax-layer {position: absolute;bottom: 0;left: 0;width: 100%;height: 100%;background-size: cover;background-position: center;transform-origin: center;}.parallax-layer img {height: 115%;margin-left: -90%;}.bg {height: 100%;max-height: 600px;}.parallax-layer:nth-child(1) {z-index: 0;filter: blur(5px);}.parallax-layer:nth-child(2) {z-index: 1;filter: blur(3px);}.parallax-layer:nth-child(3) {z-index: 2;filter: blur(2px);}.parallax-layer:nth-child(4) {z-index: 3;filter: blur(0px);}.parallax-layer:nth-child(5) {z-index: 4;filter: blur(2px);}.parallax-layer:nth-child(6) {z-index: 5;filter: blur(3px);}.parallax-layer:nth-child(7) {z-index: 6;filter: blur(5px);}.parallax-layer img {margin-top: calc(-13% + var(--layer-offset, 0%));}.card-content {position: absolute;z-index: 10;text-align: left;color: white;pointer-events: none;bottom: 0;padding: 32px;font-size: 20px;line-height: 0;}
JS
const card = document.querySelector(".card");const layers = document.querySelectorAll(".parallax-layer");let isHovered = false;function applyParallaxEffect(x, y) {const tiltY = (x - 0.5) * 60;layers.forEach((layer, index) => {const depthX = index * 30;const depthY = index * 13;const moveX = (x - 0.5) * depthX;const moveY = (y - 0.5) * depthY;layer.style.transform = `translate(${moveX}px, ${moveY}px) rotateY(${tiltY}deg)`;});}card.addEventListener("mousemove", (e) => {const rect = card.getBoundingClientRect();const x = (e.clientX - rect.left) / rect.width;const y = (e.clientY - rect.top) / rect.height;isHovered = true;applyParallaxEffect(x, y);});window.addEventListener("load", () => {let progress = 0;function animate() {if (isHovered) return;progress += 0.005;const x = Math.sin(progress) * 0.5 + 0.5;const y = 0.5;applyParallaxEffect(x, y);if (progress < Math.PI * 2) {requestAnimationFrame(animate);}}animate();});