<div class="checkout-wrapper">
<div class="card-perspective">
<div class="credit-card" id="credit-card">
<div class="hologram-layer" id="hologram"></div>
<div class="card-inner">
<div class="card-top">
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#fbbf24" stroke-width="1.5"><rect x="2" y="5" width="20" height="14" rx="2" ry="2"></rect><line x1="2" y1="10" x2="22" y2="10"></line></svg>
<svg viewBox="0 0 24 24" width="40" height="40" fill="#ffffff" opacity="0.8"><circle cx="8" cy="12" r="6"></circle><circle cx="16" cy="12" r="6"></circle></svg>
</div>
<div class="card-number">4000 1234 5678 9010</div>
<div class="card-bottom">
<div class="card-holder">
<span class="label">Card Holder</span>
<span class="value">ALEXANDER SMITH</span>
</div>
<div class="card-expires">
<span class="label">Expires</span>
<span class="value">12/28</span>
</div>
</div>
</div>
</div>
</div>
<p class="helper-text">Hover over the card to interact</p>
</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: #e2e8f0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.checkout-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}
.card-perspective {
perspective: 1000px;
width: 400px;
height: 250px;
}
.credit-card {
position: relative;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #1e293b, #0f172a);
border-radius: 20px;
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2);
transform-style: preserve-3d;
will-change: transform;
overflow: hidden;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.hologram-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.3) 30%, transparent 40%);
background-size: 300% 300%;
background-position: 50% 50%;
z-index: 2;
mix-blend-mode: overlay;
pointer-events: none;
}
.card-inner {
position: relative;
z-index: 3;
padding: 30px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
color: #ffffff;
}
.card-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
transform: translateZ(30px);
}
.card-number {
font-size: 1.43rem;
font-family: "Courier New", Courier, monospace;
letter-spacing: 4px;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
transform: translateZ(40px);
}
.card-bottom {
display: flex;
justify-content: space-between;
transform: translateZ(20px);
}
.label {
display: block;
font-size: 0.65rem;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 4px;
}
.value {
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 1px;
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.helper-text {
color: #64748b;
font-weight: 500;
}
const card = document.getElementById("credit-card");
const hologram = document.getElementById("hologram");
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;
/* Calculate rotation based on cursor distance from center */
const rotateX = ((y - centerY) / centerY) * -15;
const rotateY = ((x - centerX) / centerX) * 15;
card.style.transform = "rotateX(" + rotateX + "deg) rotateY(" + rotateY + "deg)";
/* Shift the gradient background for the holographic effect */
const bgX = (x / rect.width) * 100;
const bgY = (y / rect.height) * 100;
hologram.style.backgroundPosition = bgX + "% " + bgY + "%";
});
card.addEventListener("mouseleave", function() {
/* Snap back securely with a smooth transition */
card.style.transition = "transform 0.5s ease";
card.style.transform = "rotateX(0deg) rotateY(0deg)";
hologram.style.transition = "background-position 0.5s ease";
hologram.style.backgroundPosition = "50% 50%";
});
card.addEventListener("mouseenter", function() {
/* Remove transition to allow instant mouse tracking */
card.style.transition = "none";
hologram.style.transition = "none";
});
