<div class="spatial-card-wrapper" id="spatial-card">
<div class="spatial-card-inner">
<div class="spatial-bg"></div>
<div class="spatial-layer layer-1">
<div class="layer-badge">PRO</div>
</div>
<div class="spatial-layer layer-2">
<h2>Immersive View</h2>
</div>
<div class="spatial-layer layer-3">
<p>Experience true physical depth and dynamic lighting.</p>
</div>
<div class="spatial-layer layer-4">
<button class="spatial-btn">Explore</button>
</div>
</div>
</div>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin: 0;
background: #1e293b;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.spatial-card-wrapper {
perspective: 1200px;
width: 340px;
height: 460px;
}
.spatial-card-inner {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.2s ease-out;
border-radius: 24px;
}
.spatial-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #0f172a, #1e1b4b);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
transform: translateZ(0px);
}
.spatial-layer {
position: absolute;
width: 100%;
display: flex;
justify-content: center;
pointer-events: none;
transition: transform 0.2s ease-out;
}
.layer-1 { top: 30px; transform: translateZ(20px); }
.layer-2 { top: 120px; transform: translateZ(40px); }
.layer-3 { top: 180px; transform: translateZ(60px); padding: 0 30px; text-align: center; }
.layer-4 { bottom: 40px; transform: translateZ(80px); pointer-events: auto; }
.layer-badge {
background: #3b82f6;
color: #ffffff;
padding: 6px 16px;
border-radius: 20px;
font-weight: 800;
letter-spacing: 1px;
}
.layer-2 h2 {
color: #ffffff;
font-size: 2.2rem;
margin: 0;
text-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}
.layer-3 p {
color: #94a3b8;
font-size: 1.1rem;
line-height: 1.6;
}
.spatial-btn {
background: #ffffff;
color: #0f172a;
border: none;
padding: 12px 32px;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
const card = document.getElementById("spatial-card");
const inner = document.querySelector(".spatial-card-inner");
card.addEventListener("mousemove", function(e) {
const rect = card.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const centerX = rect.width / 2;
const centerY = rect.height / 2;
const rotateX = ((y - centerY) / centerY) * -15;
const rotateY = ((x - centerX) / centerX) * 15;
inner.style.transform = "rotateX(" + rotateX + "deg) rotateY(" + rotateY + "deg)";
});
card.addEventListener("mouseleave", function() {
inner.style.transform = "rotateX(0deg) rotateY(0deg)";
inner.style.transition = "transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1)";
});
card.addEventListener("mouseenter", function() {
inner.style.transition = "transform 0.1s ease-out";
});
