*, *::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";
background: #111827;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.holo-container {
perspective: 1000px;
}
.holo-card {
position: relative;
width: 300px;
height: 420px;
background: #1e293b;
border-radius: 20px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
overflow: hidden;
transition: transform 0.1s ease;
transform-style: preserve-3d;
cursor: pointer;
}
.holo-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
115deg,
transparent 20%,
rgba(255, 0, 128, 0.4) 30%,
rgba(255, 204, 0, 0.4) 40%,
rgba(0, 204, 255, 0.4) 50%,
rgba(0, 255, 128, 0.4) 60%,
transparent 70%
);
background-size: 300% 300%;
background-position: var(--bg-x, 50%) var(--bg-y, 50%);
mix-blend-mode: color-dodge;
opacity: 0.6;
z-index: 2;
transition: background-position 0.1s ease;
pointer-events: none;
}
.holo-card::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(
circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
rgba(255, 255, 255, 0.3) 0%,
transparent 50%
);
z-index: 3;
pointer-events: none;
}
.card-content {
position: relative;
z-index: 1;
padding: 40px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}
.card-content h2 {
color: #ffffff;
margin: 0 0 10px 0;
font-size: 2rem;
transform: translateZ(30px);
}
.card-content p {
color: #cbd5e1;
margin: 0;
line-height: 1.5;
transform: translateZ(20px);
}
const card = document.getElementById("holo-card");
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;
card.style.transform = "rotateX(" + rotateX + "deg) rotateY(" + rotateY + "deg)";
const bgX = (x / rect.width) * 100;
const bgY = (y / rect.height) * 100;
card.style.setProperty("--bg-x", bgX + "%");
card.style.setProperty("--bg-y", bgY + "%");
card.style.setProperty("--mouse-x", x + "px");
card.style.setProperty("--mouse-y", y + "px");
});
card.addEventListener("mouseleave", function() {
card.style.transform = "rotateX(0deg) rotateY(0deg)";
card.style.setProperty("--bg-x", "50%");
card.style.setProperty("--bg-y", "50%");
card.style.setProperty("--mouse-x", "50%");
card.style.setProperty("--mouse-y", "50%");
});
