Webleb - UI Elements - Payment card

HTML

<!DOCTYPE html>

<head>

<title>3D Payment Card</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600&display=swap');

body {

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

font-family: 'Source Code Pro', monospace;

margin: 0;

padding: 20px;

}

.card-container {

perspective: 1000px;

width: 100%;

max-width: 400px;

}

.card {

width: 100%;

height: 240px;

position: relative;

transform-style: preserve-3d;

transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);

cursor: pointer;

}

.card-front, .card-back {

width: 100%;

height: 100%;

position: absolute;

backface-visibility: hidden;

border-radius: 15px;

box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);

padding: 25px;

box-sizing: border-box;

display: flex;

flex-direction: column;

justify-content: space-between;

color: white;

overflow: hidden;

}

.card-front {

background: linear-gradient(135deg, #1a1a2e, #16213e);

transform: rotateY(0deg);

}

.card-back {

background: linear-gradient(135deg, #16213e, #1a1a2e);

transform: rotateY(180deg);

}

.flipped {

transform: rotateY(180deg);

}

/* Front card styling */

.card-logo {

display: flex;

justify-content: flex-end;

margin-bottom: 20px;

}

.card-logo img {

height: 40px;

}

.card-number {

font-size: 22px;

letter-spacing: 3px;

margin-bottom: 30px;

text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

word-spacing: 8px;

}

.card-details {

display: flex;

justify-content: space-between;

}

.card-holder, .expiry-date {

display: flex;

flex-direction: column;

}

.card-label {

font-size: 10px;

opacity: 0.7;

margin-bottom: 5px;

text-transform: uppercase;

letter-spacing: 1px;

}

.card-value {

font-size: 16px;

letter-spacing: 1px;

}

/* Back card styling */

.card-magnetic-strip {

height: 40px;

background: #000;

margin-top: 20px;

margin-bottom: 15px;

}

.card-signature {

height: 40px;

background: #fff;

border-radius: 4px;

display: flex;

align-items: center;

padding: 0 10px;

color: #333;

font-size: 12px;

position: relative;

margin-bottom: 20px;

}

.card-signature::after {

content: "Authorized Signature - Not Valid Unless Signed";

position: absolute;

right: 10px;

font-size: 6px;

color: #999;

}

.card-cvv {

display: flex;

justify-content: flex-end;

}

.cvv-strip {

background: #fff;

color: #333;

padding: 5px 10px;

border-radius: 3px;

font-size: 14px;

width: 60px;

text-align: center;

}

.card-issuer {

font-size: 10px;

text-align: center;

opacity: 0.7;

margin-top: 10px;

}

/* Holographic effect */

.holographic {

position: absolute;

width: 60px;

height: 40px;

background: linear-gradient(45deg,

rgba(255,255,255,0.1) 0%,

rgba(255,255,255,0.5) 50%,

rgba(255,255,255,0.1) 100%);

border-radius: 5px;

top: 20px;

left: 20px;

opacity: 0.8;

}

/* Contactless symbol */

.contactless {

position: absolute;

right: 25px;

bottom: 25px;

width: 30px;

height: 30px;

background: radial-gradient(circle at center,

rgba(255,255,255,0.8) 0%,

rgba(255,255,255,0.4) 50%,

transparent 70%);

border-radius: 50%;

display: flex;

justify-content: center;

align-items: center;

}

.contactless::before {

content: "⌃";

font-size: 18px;

color: rgba(255,255,255,0.8);

transform: rotate(90deg);

}

</style>

</head>

<body>

</div>

<span class="card-label">Card Holder</span>

</div>

<span class="card-label">Expires</span>

</div>

</div>

</div>

<div class="card-issuer">This card is issued by Example Bank under license from Mastercard International</div>

</div>

// Add slight tilt effect on mouse move

document.querySelector('.card-container').addEventListener('mousemove', (e) => {

const card = e.currentTarget.querySelector('.card');

const cardRect = card.getBoundingClientRect();

const cardCenterX = cardRect.left + cardRect.width / 2;

const cardCenterY = cardRect.top + cardRect.height / 2;

const angleX = (e.clientY - cardCenterY) / 20;

const angleY = (cardCenterX - e.clientX) / 20;

if (!card.classList.contains('flipped')) {

card.style.transform = `rotateY(${angleY}deg) rotateX(${angleX}deg)`;

}

});

// Reset rotation when mouse leaves

document.querySelector('.card-container').addEventListener('mouseleave', (e) => {

const card = e.currentTarget.querySelector('.card');

card.style.transform = 'rotateY(0deg) rotateX(0deg)';

});

</script>

</body>

</html>

CSS

JS

Payment card

Recommended