Project Gallery
Explore Modern 3D Flip Cards | Team Showcase Design in detail
1
/1
100%
Project Overview
Modern 3D Flip Cards | Team Showcase Design
Project Description
A modern 3D vertical flip card UI displaying creative team profiles with smooth animations and interactive social elements.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>3 Vertical Flip Cards | Team Profiles</title>
<!-- Font Awesome 6 (free icons) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap" rel="stylesheet" />
</head>
<body>
<div class="header-section">
<div class="badge"><i class="fas fa-layer-group"></i> vertical flip cards</div>
<h1>Meet the Creative Team</h1>
<p>Hover or tap on any card — back side appears from bottom with vertical flip effect</p>
</div>
<div class="cards-container">
<!-- CARD 1 - John Doe (Design Lead) -->
<div class="flip-container">
<div class="flip-inner-container">
<div class="flip-front">
<img src="https://images.pexels.com/photos/3184292/pexels-photo-3184292.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Creative workspace" loading="lazy">
<div class="flip-badge"><i class="fas fa-arrows-spin"></i> flip up</div>
<div class="front-overlay">
<h3>✨ Design Lead</h3>
<p>UI/UX • Creative Direction</p>
</div>
</div>
<div class="flip-back">
<div class="profile-image">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="John Doe" onerror="this.src='https://ui-avatars.com/api/?background=4f46e5&color=fff&rounded=true&size=100&name=John+D.'">
</div>
<h2>John Doe</h2>
<span class="bio-text"><i class="fas fa-palette"></i> Design Lead</span>
<p class="description">Crafting beautiful interfaces & leading product design at WanderWing. Loves minimalism.</p>
<div class="social-links">
<a href="#" class="social-icon" data-name="Facebook" data-icon="📘"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social-icon" data-name="Instagram" data-icon="📸"><i class="fab fa-instagram"></i></a>
<a href="#" class="social-icon" data-name="YouTube" data-icon="🎥"><i class="fab fa-youtube"></i></a>
<a href="#" class="social-icon" data-name="Twitter" data-icon="🐦"><i class="fab fa-twitter"></i></a>
<a href="#" class="social-icon" data-name="GitHub" data-icon="🐙"><i class="fab fa-github"></i></a>
</div>
<div class="stats-row">
<div class="stat-item"><span class="stat-number">28.5k</span><div class="stat-label">Followers</div></div>
<div class="stat-item"><span class="stat-number">180+</span><div class="stat-label">Projects</div></div>
<div class="stat-item"><span class="stat-number">4.9</span><div class="stat-label">Rating</div></div>
</div>
</div>
</div>
</div>
<!-- CARD 2 - Sarah Chen (Frontend Architect) -->
<div class="flip-container">
<div class="flip-inner-container">
<div class="flip-front">
<img src="https://images.pexels.com/photos/1181373/pexels-photo-1181373.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Code and creativity" loading="lazy">
<div class="flip-badge"><i class="fas fa-arrows-spin"></i> flip up</div>
<div class="front-overlay">
<h3>⚡ Frontend Pro</h3>
<p>React • Vue • Animations</p>
</div>
</div>
<div class="flip-back">
<div class="profile-image">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Sarah Chen" onerror="this.src='https://ui-avatars.com/api/?background=4f46e5&color=fff&rounded=true&size=100&name=Sarah+C.'">
</div>
<h2>Sarah Chen</h2>
<span class="bio-text"><i class="fas fa-code"></i> Frontend Architect</span>
<p class="description">Building scalable design systems and mentoring devs. Loves interactive animations.</p>
<div class="social-links">
<a href="#" class="social-icon" data-name="Facebook" data-icon="📘"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social-icon" data-name="Instagram" data-icon="📸"><i class="fab fa-instagram"></i></a>
<a href="#" class="social-icon" data-name="YouTube" data-icon="🎥"><i class="fab fa-youtube"></i></a>
<a href="#" class="social-icon" data-name="Twitter" data-icon="🐦"><i class="fab fa-twitter"></i></a>
<a href="#" class="social-icon" data-name="GitHub" data-icon="🐙"><i class="fab fa-github"></i></a>
</div>
<div class="stats-row">
<div class="stat-item"><span class="stat-number">42k</span><div class="stat-label">Followers</div></div>
<div class="stat-item"><span class="stat-number">320+</span><div class="stat-label">Commits</div></div>
<div class="stat-item"><span class="stat-number">5.0</span><div class="stat-label">Reputation</div></div>
</div>
</div>
</div>
</div>
<!-- CARD 3 - Alex Rivera (Content Creator) -->
<div class="flip-container">
<div class="flip-inner-container">
<div class="flip-front">
<img src="https://images.pexels.com/photos/3244513/pexels-photo-3244513.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Content creation" loading="lazy">
<div class="flip-badge"><i class="fas fa-arrows-spin"></i> flip up</div>
<div class="front-overlay">
<h3>📹 Creator Hub</h3>
<p>YouTube • Content Strategy</p>
</div>
</div>
<div class="flip-back">
<div class="profile-image">
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Alex Rivera" onerror="this.src='https://ui-avatars.com/api/?background=4f46e5&color=fff&rounded=true&size=100&name=Alex+R.'">
</div>
<h2>Alex Rivera</h2>
<span class="bio-text"><i class="fas fa-video"></i> Content Creator</span>
<p class="description">Teaching dev & design on YouTube. Building community and inspiring beginners.</p>
<div class="social-links">
<a href="#" class="social-icon" data-name="Facebook" data-icon="📘"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social-icon" data-name="Instagram" data-icon="📸"><i class="fab fa-instagram"></i></a>
<a href="#" class="social-icon" data-name="YouTube" data-icon="🎥"><i class="fab fa-youtube"></i></a>
<a href="#" class="social-icon" data-name="Twitter" data-icon="🐦"><i class="fab fa-twitter"></i></a>
<a href="#" class="social-icon" data-name="GitHub" data-icon="🐙"><i class="fab fa-github"></i></a>
</div>
<div class="stats-row">
<div class="stat-item"><span class="stat-number">156k</span><div class="stat-label">Subscribers</div></div>
<div class="stat-item"><span class="stat-number">450+</span><div class="stat-label">Videos</div></div>
<div class="stat-item"><span class="stat-number">4.8</span><div class="stat-label">Engagement</div></div>
</div>
</div>
</div>
</div>
</div>
<div class="hint-wrapper">
<div class="global-hint">
<i class="fas fa-arrow-up"></i> Vertical flip effect — back side appears from bottom on hover/tap
</div>
</div>
</body>
</html>CSS
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(145deg, #0f172a 0%, #1e1b4b 100%);
min-height: 100vh;
padding: 50px 30px;
}
/* Header section */
.header-section {
text-align: center;
max-width: 800px;
margin: 0 auto 50px auto;
}
.header-section .badge {
display: inline-block;
background: rgba(165, 180, 252, 0.2);
backdrop-filter: blur(4px);
color: #c7d2fe;
padding: 6px 18px;
border-radius: 40px;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 16px;
}
.header-section h1 {
font-size: 2.5rem;
font-weight: 800;
background: linear-gradient(135deg, #e0e7ff, #a78bfa);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
margin-bottom: 12px;
}
.header-section p {
color: #94a3b8;
font-size: 1rem;
}
/* Cards Container - Flex Grid */
.cards-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
max-width: 1300px;
margin: 0 auto;
}
/* Flip Container - Vertical Flip (X-axis) */
.flip-container {
width: 320px;
height: 440px;
background-color: transparent;
perspective: 1500px;
}
.flip-inner-container {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transform-style: preserve-3d;
transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
border-radius: 28px;
box-shadow: 0 30px 40px -20px rgba(0, 0, 0, 0.5);
}
/* VERTICAL FLIP on hover: rotateX(180deg) -> back side neeche se aata hai */
.flip-container:hover .flip-inner-container {
transform: rotateX(180deg);
cursor: pointer;
}
/* Front & Back panels */
.flip-front,
.flip-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 28px;
overflow: hidden;
}
/* FRONT SIDE */
.flip-front {
background: linear-gradient(135deg, #2d1b4e, #1a1a2e);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.flip-front img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
display: block;
}
.flip-container:hover .flip-front img {
transform: scale(1.02);
}
/* Overlay on front */
.front-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
padding: 24px 20px;
text-align: left;
color: white;
}
.front-overlay h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 6px;
letter-spacing: -0.3px;
}
.front-overlay p {
font-size: 0.8rem;
opacity: 0.9;
}
.flip-badge {
position: absolute;
top: 16px;
right: 16px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(8px);
padding: 6px 12px;
border-radius: 40px;
font-size: 0.7rem;
font-weight: 600;
color: white;
letter-spacing: 0.5px;
}
/* BACK SIDE - yeh neeche side se aayega (rotated on X) */
.flip-back {
background: #ffffff;
transform: rotateX(180deg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 28px 20px 30px;
box-shadow: 0 20px 35px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.profile-image {
text-align: center;
}
.profile-image img {
width: 105px;
height: 105px;
border-radius: 50%;
object-fit: cover;
border: 4px solid #fff;
box-shadow: 0 10px 25px rgba(79, 70, 229, 0.3);
margin-top: -10px;
background: white;
}
.flip-back h2 {
font-size: 1.6rem;
font-weight: 700;
margin-top: 14px;
background: linear-gradient(120deg, #4f46e5, #9333ea);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.bio-text {
font-size: 0.8rem;
color: #4b5563;
font-weight: 500;
margin: 8px 0 10px;
background: #f3f4f6;
padding: 5px 14px;
border-radius: 40px;
display: inline-block;
}
.description {
font-size: 0.82rem;
line-height: 1.45;
color: #374151;
margin: 10px 0 14px;
padding: 0 10px;
font-weight: 400;
}
/* Social Icons */
.social-links {
display: flex;
justify-content: center;
gap: 14px;
margin: 8px 0 12px;
flex-wrap: wrap;
}
.social-links a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: #f0f2ff;
color: #4f46e5;
border-radius: 50%;
font-size: 1.2rem;
transition: all 0.25s ease;
text-decoration: none;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
.social-links a:hover {
background: #4f46e5;
color: white;
transform: translateY(-4px);
box-shadow: 0 10px 18px rgba(79, 70, 229, 0.3);
}
/* Stats row */
.stats-row {
display: flex;
justify-content: space-around;
width: 100%;
margin-top: 12px;
background: #f9fafb;
border-radius: 60px;
padding: 8px 12px;
}
.stat-item {
text-align: center;
}
.stat-number {
font-weight: 800;
font-size: 1rem;
color: #1f2937;
}
.stat-label {
font-size: 0.65rem;
color: #6b7280;
}
/* Responsive: tablets and mobile */
@media (max-width: 768px) {
.cards-container {
gap: 30px;
}
.flip-container {
width: 280px;
height: 420px;
}
.social-links a {
width: 36px;
height: 36px;
font-size: 1rem;
}
.flip-back h2 {
font-size: 1.4rem;
}
.profile-image img {
width: 90px;
height: 90px;
}
.front-overlay h3 {
font-size: 1.3rem;
}
.header-section h1 {
font-size: 2rem;
}
}
@media (max-width: 950px) {
.cards-container {
gap: 25px;
}
}
/* Fade in animation */
@keyframes fadeSlide {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.flip-container {
animation: fadeSlide 0.5s ease backwards;
}
.flip-container:nth-child(1) { animation-delay: 0.05s; }
.flip-container:nth-child(2) { animation-delay: 0.15s; }
.flip-container:nth-child(3) { animation-delay: 0.25s; }
/* hint text */
.global-hint {
text-align: center;
margin-top: 50px;
color: #a5b4fc;
font-size: 0.8rem;
background: rgba(255,255,255,0.08);
display: inline-block;
padding: 8px 24px;
border-radius: 60px;
backdrop-filter: blur(4px);
width: auto;
}
.hint-wrapper {
text-align: center;
margin-top: 40px;
}
</style>JavaScript
<script>
(function() {
// Toast notification system
let toastEl = null;
function showToastMessage(msg, icon = "💫") {
if (!toastEl) {
toastEl = document.createElement('div');
toastEl.style.position = 'fixed';
toastEl.style.bottom = '25px';
toastEl.style.left = '50%';
toastEl.style.transform = 'translateX(-50%)';
toastEl.style.backgroundColor = '#1f2937';
toastEl.style.color = '#f9fafb';
toastEl.style.padding = '12px 24px';
toastEl.style.borderRadius = '60px';
toastEl.style.fontFamily = "'Inter', sans-serif";
toastEl.style.fontWeight = '500';
toastEl.style.fontSize = '0.85rem';
toastEl.style.zIndex = '9999';
toastEl.style.backdropFilter = 'blur(12px)';
toastEl.style.background = 'rgba(0,0,0,0.85)';
toastEl.style.boxShadow = '0 10px 20px rgba(0,0,0,0.2)';
toastEl.style.pointerEvents = 'none';
toastEl.style.whiteSpace = 'nowrap';
document.body.appendChild(toastEl);
}
toastEl.innerHTML = `${icon} ${msg}`;
toastEl.style.opacity = '1';
toastEl.style.transition = 'opacity 0.2s';
setTimeout(() => {
toastEl.style.opacity = '0';
}, 2000);
}
// Attach event listeners to all social icons
const socialIcons = document.querySelectorAll('.social-icon');
socialIcons.forEach(icon => {
icon.addEventListener('click', (e) => {
e.preventDefault();
const platform = icon.getAttribute('data-name') || 'social';
const emoji = icon.getAttribute('data-icon') || '🔗';
showToastMessage(`Opening ${platform} profile (demo)`, emoji);
});
});
// Welcome hint after load
setTimeout(() => {
showToastMessage("3 vertical flip cards added! Hover to see back side from bottom ✨", "🔄");
}, 600);
})();
</script>