Home
Sufyan jutt
Swipe card fully animative

Swipe card fully animative

@sufyandevs #sufyandevs #sufyandev #shanwebdev

This tailwind example is contributed by Sufyan jutt, on 05-Nov-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is Transitions

Card Animation

Author Sufyan jutt

120

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Card Stack Swiper</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
        
        * {
            font-family: 'Poppins', sans-serif;
        }
        
        .card-stack {
            perspective: 1500px;
            height: 500px;
            position: relative;
            width: 100%;
            margin: 0 auto;
        }
        
        .card {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 24px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
            transform-style: preserve-3d;
            transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
            cursor: pointer;
        }
        
        .card-front, .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 24px;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            padding: 30px;
            box-sizing: border-box;
            overflow: hidden;
        }
        
        .card-back {
            transform: rotateY(180deg);
        }
        
        .card.flipped {
            transform: rotateY(180deg);
        }
        
        /* Card positioning in stack */
        .card.active {
            z-index: 10;
            transform: translateX(0) scale(1) rotateY(0deg);
        }
        
        .card.next {
            z-index: 9;
            transform: translateX(30px) scale(0.95) rotateY(-5deg);
            opacity: 0.9;
            filter: brightness(0.9);
        }
        
        .card.next-2 {
            z-index: 8;
            transform: translateX(60px) scale(0.9) rotateY(-10deg);
            opacity: 0.7;
            filter: brightness(0.8);
        }
        
        .card.next-3 {
            z-index: 7;
            transform: translateX(90px) scale(0.85) rotateY(-15deg);
            opacity: 0.5;
            filter: brightness(0.7);
        }
        
        .card.previous {
            z-index: 9;
            transform: translateX(-30px) scale(0.95) rotateY(5deg);
            opacity: 0.9;
            filter: brightness(0.9);
        }
        
        .card.previous-2 {
            z-index: 8;
            transform: translateX(-60px) scale(0.9) rotateY(10deg);
            opacity: 0.7;
            filter: brightness(0.8);
        }
        
        .card.previous-3 {
            z-index: 7;
            transform: translateX(-90px) scale(0.85) rotateY(15deg);
            opacity: 0.5;
            filter: brightness(0.7);
        }
        
        .card.hidden {
            opacity: 0;
            transform: scale(0.8);
            z-index: 1;
        }
        
        .card.swipe-left {
            transform: translateX(-150%) rotateZ(-30deg) scale(0.8);
            opacity: 0;
        }
        
        .card.swipe-right {
            transform: translateX(150%) rotateZ(30deg) scale(0.8);
            opacity: 0;
        }
        
        .floating {
            animation: floating 3s ease-in-out infinite;
        }
        
        @keyframes floating {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }
        
        .pulse {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .bounce-in {
            animation: bounceIn 0.8s ease-out;
        }
        
        @keyframes bounceIn {
            0% { transform: scale(0.3); opacity: 0; }
            50% { transform: scale(1.05); opacity: 0.8; }
            100% { transform: scale(1); opacity: 1; }
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .card-gradient-1 {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }
        
        .card-gradient-2 {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }
        
        .card-gradient-3 {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }
        
        .card-gradient-4 {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        }
        
        .card-gradient-5 {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
        }
        
        .card-gradient-6 {
            background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);
        }
        
        .progress-dot {
            transition: all 0.3s ease;
        }
        
        .progress-dot.active {
            transform: scale(1.3);
        }
        
        .swipe-hint {
            animation: swipeHint 2s ease-in-out infinite;
        }
        
        @keyframes swipeHint {
            0%, 100% { transform: translateX(0); opacity: 0.7; }
            50% { transform: translateX(20px); opacity: 1; }
        }
    </style>
</head>
<body class="gradient-bg min-h-screen flex flex-col items-center justify-center p-4">
    <div class="max-w-lg w-full">
        <div class="text-center mb-8">
            <h1 class="text-4xl font-bold text-white mb-2">3D Card Stack</h1>
            <p class="text-white/80">Click or swipe to navigate through the cards</p>
            
            
            <div class="flex justify-center mt-6 space-x-3">
                <div class="progress-dot w-3 h-3 rounded-full bg-white/30" data-index="0"></div>
                <div class="progress-dot w-3 h-3 rounded-full bg-white/30" data-index="1"></div>
                <div class="progress-dot w-3 h-3 rounded-full bg-white/30" data-index="2"></div>
                <div class="progress-dot w-3 h-3 rounded-full bg-white/30" data-index="3"></div>
                <div class="progress-dot w-3 h-3 rounded-full bg-white/30" data-index="4"></div>
                <div class="progress-dot w-3 h-3 rounded-full bg-white/30" data-index="5"></div>
            </div>
        </div>
        
        
        <div class="card-stack mb-8">
            
            <div class="card active bounce-in card-gradient-1" data-index="0">
                <div class="card-front text-white flex flex-col">
                    <div class="flex justify-between items-start mb-4">
                        <span class="bg-white/20 px-3 py-1 rounded-full text-sm">Featured</span>
                        <button class="flip-btn bg-white/20 w-10 h-10 rounded-full flex items-center justify-center">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                    </div>
                    
                    <div class="flex-1 flex flex-col justify-center items-center">
                        <div class="floating mb-6">
                            <i class="fas fa-globe-americas text-6xl"></i>
                        </div>
                        <h2 class="text-3xl font-bold mb-2 text-center">Travel Explorer</h2>
                        <p class="text-center text-white/80">Discover amazing destinations around the world with our travel guides.</p>
                    </div>
                    
                    <div class="mt-4 flex justify-between">
                        <button class="swipe-left-btn bg-white/20 px-4 py-2 rounded-full flex items-center">
                            <i class="fas fa-arrow-left mr-2"></i> Previous
                        </button>
                        <button class="swipe-right-btn bg-white/20 px-4 py-2 rounded-full flex items-center">
                            Next <i class="fas fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                </div>
                
                <div class="card-back text-white bg-blue-800/90 flex flex-col">
                    <div class="flex justify-between items-start mb-4">
                        <span class="bg-white/20 px-3 py-1 rounded-full text-sm">Details</span>
                        <button class="flip-btn bg-white/20 w-10 h-10 rounded-full flex items-center justify-center">
                            <i class="fas fa-undo"></i>
                        </button>
                    </div>
                    
                    <div class="flex-1 flex flex-col justify-center">
                        <h2 class="text-2xl font-bold mb-4">Travel Features</h2>
                        <ul class="space-y-3">
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Interactive maps</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Local experiences</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Travel itineraries</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
            
            <div class="card next card-gradient-2" data-index="1">
                <div class="card-front text-white flex flex-col">
                    <div class="flex justify-between items-start mb-4">
                        <span class="bg-white/20 px-3 py-1 rounded-full text-sm">New</span>
                        <button class="flip-btn bg-white/20 w-10 h-10 rounded-full flex items-center justify-center">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                    </div>
                    
                    <div class="flex-1 flex flex-col justify-center items-center">
                        <div class="floating mb-6">
                            <i class="fas fa-music text-6xl"></i>
                        </div>
                        <h2 class="text-3xl font-bold mb-2 text-center">Music Experience</h2>
                        <p class="text-center text-white/80">Immerse yourself in high-quality audio with our premium music service.</p>
                    </div>
                    
                    <div class="mt-4 flex justify-between">
                        <button class="swipe-left-btn bg-white/20 px-4 py-2 rounded-full flex items-center">
                            <i class="fas fa-arrow-left mr-2"></i> Previous
                        </button>
                        <button class="swipe-right-btn bg-white/20 px-4 py-2 rounded-full flex items-center">
                            Next <i class="fas fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                </div>
                
                <div class="card-back text-white bg-blue-800/90 flex flex-col">
                    <div class="flex justify-between items-start mb-4">
                        <span class="bg-white/20 px-3 py-1 rounded-full text-sm">Features</span>
                        <button class="flip-btn bg-white/20 w-10 h-10 rounded-full flex items-center justify-center">
                            <i class="fas fa-undo"></i>
                        </button>
                    </div>
                    
                    <div class="flex-1 flex flex-col justify-center">
                        <h2 class="text-2xl font-bold mb-4">What's Included</h2>
                        <ul class="space-y-3">
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Lossless audio quality</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Curated playlists</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Offline listening</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
            
            <div class="card next-2 card-gradient-3" data-index="2">
                <div class="card-front text-white flex flex-col">
                    <div class="flex justify-between items-start mb-4">
                        <span class="bg-white/20 px-3 py-1 rounded-full text-sm">Popular</span>
                        <button class="flip-btn bg-white/20 w-10 h-10 rounded-full flex items-center justify-center">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                    </div>
                    
                    <div class="flex-1 flex flex-col justify-center items-center">
                        <div class="floating mb-6">
                            <i class="fas fa-utensils text-6xl"></i>
                        </div>
                        <h2 class="text-3xl font-bold mb-2 text-center">Culinary Journey</h2>
                        <p class="text-center text-white/80">Explore world cuisines with step-by-step recipes from master chefs.</p>
                    </div>
                    
                    <div class="mt-4 flex justify-between">
                        <button class="swipe-left-btn bg-white/20 px-4 py-2 rounded-full flex items-center">
                            <i class="fas fa-arrow-left mr-2"></i> Previous
                        </button>
                        <button class="swipe-right-btn bg-white/20 px-4 py-2 rounded-full flex items-center">
                            Next <i class="fas fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                </div>
                
                <div class="card-back text-white bg-blue-800/90 flex flex-col">
                    <div class="flex justify-between items-start mb-4">
                        <span class="bg-white/20 px-3 py-1 rounded-full text-sm">Recipes</span>
                        <button class="flip-btn bg-white/20 w-10 h-10 rounded-full flex items-center justify-center">
                            <i class="fas fa-undo"></i>
                        </button>
                    </div>
                    
                    <div class="flex-1 flex flex-col justify-center">
                        <h2 class="text-2xl font-bold mb-4">What You Get</h2>
                        <ul class="space-y-3">
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>1000+ recipes</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Video tutorials</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Grocery list generator</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
            
            <div class="card next-3 card-gradient-4" data-index="3">
                <div class="card-front text-white flex flex-col">
                    <div class="flex justify-between items-start mb-4">
                        <span class="bg-white/20 px-3 py-1 rounded-full text-sm">Trending</span>
                        <button class="flip-btn bg-white/20 w-10 h-10 rounded-full flex items-center justify-center">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                    </div>
                    
                    <div class="flex-1 flex flex-col justify-center items-center">
                        <div class="floating mb-6">
                            <i class="fas fa-hiking text-6xl"></i>
                        </div>
                        <h2 class="text-3xl font-bold mb-2 text-center">Adventure Awaits</h2>
                        <p class="text-center text-white/80">Find and book unique outdoor experiences with expert guides.</p>
                    </div>
                    
                    <div class="mt-4 flex justify-between">
                        <button class="swipe-left-btn bg-white/20 px-4 py-2 rounded-full flex items-center">
                            <i class="fas fa-arrow-left mr-2"></i> Previous
                        </button>
                        <button class="swipe-right-btn bg-white/20 px-4 py-2 rounded-full flex items-center">
                            Next <i class="fas fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                </div>
                
                <div class="card-back text-white bg-blue-800/90 flex flex-col">
                    <div class="flex justify-between items-start mb-4">
                        <span class="bg-white/20 px-3 py-1 rounded-full text-sm">Activities</span>
                        <button class="flip-btn bg-white/20 w-10 h-10 rounded-full flex items-center justify-center">
                            <i class="fas fa-undo"></i>
                        </button>
                    </div>
                    
                    <div class="flex-1 flex flex-col justify-center">
                        <h2 class="text-2xl font-bold mb-4">Adventure Types</h2>
                        <ul class="space-y-3">
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Mountain hiking</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Water sports</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Wildlife safaris</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
            
            <div class="card hidden card-gradient-5" data-index="4">
                <div class="card-front text-gray-800 flex flex-col">
                    <div class="flex justify-between items-start mb-4">
                        <span class="bg-black/10 px-3 py-1 rounded-full text-sm">Learning</span>
                        <button class="flip-btn bg-black/10 w-10 h-10 rounded-full flex items-center justify-center">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                    </div>
                    
                    <div class="flex-1 flex flex-col justify-center items-center">
                        <div class="floating mb-6">
                            <i class="fas fa-graduation-cap text-6xl text-purple-500"></i>
                        </div>
                        <h2 class="text-3xl font-bold mb-2 text-center">Skill Mastery</h2>
                        <p class="text-center text-gray-600">Learn new skills with our interactive courses and expert instructors.</p>
                    </div>
                    
                    <div class="mt-4 flex justify-between">
                        <button class="swipe-left-btn bg-black/10 px-4 py-2 rounded-full flex items-center">
                            <i class="fas fa-arrow-left mr-2"></i> Previous
                        </button>
                        <button class="swipe-right-btn bg-purple-500 text-white px-4 py-2 rounded-full flex items-center">
                            Next <i class="fas fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                </div>
                
                <div class="card-back text-white bg-blue-800/90 flex flex-col">
                    <div class="flex justify-between items-start mb-4">
                        <span class="bg-white/20 px-3 py-1 rounded-full text-sm">Courses</span>
                        <button class="flip-btn bg-white/20 w-10 h-10 rounded-full flex items-center justify-center">
                            <i class="fas fa-undo"></i>
                        </button>
                    </div>
                    
                    <div class="flex-1 flex flex-col justify-center">
                        <h2 class="text-2xl font-bold mb-4">Learning Paths</h2>
                        <ul class="space-y-3">
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Web development</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Data science</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Digital marketing</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
            
            <div class="card hidden card-gradient-6" data-index="5">
                <div class="card-front text-gray-800 flex flex-col">
                    <div class="flex justify-between items-start mb-4">
                        <span class="bg-black/10 px-3 py-1 rounded-full text-sm">Final</span>
                        <button class="flip-btn bg-black/10 w-10 h-10 rounded-full flex items-center justify-center">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                    </div>
                    
                    <div class="flex-1 flex flex-col justify-center items-center">
                        <div class="floating mb-6">
                            <i class="fas fa-gem text-6xl text-purple-500"></i>
                        </div>
                        <h2 class="text-3xl font-bold mb-2 text-center">Premium Access</h2>
                        <p class="text-center text-gray-600">Unlock all features with our premium membership plan.</p>
                    </div>
                    
                    <div class="mt-4 flex justify-between">
                        <button class="swipe-left-btn bg-black/10 px-4 py-2 rounded-full flex items-center">
                            <i class="fas fa-arrow-left mr-2"></i> Previous
                        </button>
                        <button class="swipe-right-btn bg-purple-500 text-white px-4 py-2 rounded-full flex items-center pulse">
                            Upgrade <i class="fas fa-crown ml-2"></i>
                        </button>
                    </div>
                </div>
                
                <div class="card-back text-white bg-blue-800/90 flex flex-col">
                    <div class="flex justify-between items-start mb-4">
                        <span class="bg-white/20 px-3 py-1 rounded-full text-sm">Benefits</span>
                        <button class="flip-btn bg-white/20 w-10 h-10 rounded-full flex items-center justify-center">
                            <i class="fas fa-undo"></i>
                        </button>
                    </div>
                    
                    <div class="flex-1 flex flex-col justify-center">
                        <h2 class="text-2xl font-bold mb-4">Premium Features</h2>
                        <ul class="space-y-3">
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Ad-free experience</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Exclusive content</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Priority support</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        
        <div class="flex justify-center space-x-6 mb-8">
            <button id="prev-btn" class="bg-white/20 text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg hover:bg-white/30 transition-all duration-300">
                <i class="fas fa-chevron-left text-xl"></i>
            </button>
            <button id="flip-btn" class="bg-white/20 text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg hover:bg-white/30 transition-all duration-300">
                <i class="fas fa-sync-alt text-xl"></i>
            </button>
            <button id="next-btn" class="bg-white/20 text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg hover:bg-white/30 transition-all duration-300 swipe-hint">
                <i class="fas fa-chevron-right text-xl"></i>
            </button>
        </div>
        
        
        <div class="text-center text-white/70 text-sm">
            <p><i class="fas fa-mouse-pointer mr-2"></i> Click buttons or swipe to navigate</p>
            <p><i class="fas fa-sync-alt mr-2"></i> Click the flip icon to see card details</p>
            <p><i class="fas fa-layer-group mr-2"></i> See cards behind the active one</p>
        </div>
    </div>

Related Examples

Why Us section with hover animation
Why to choose us section, responsive and hove animation

Author:
Amit Pachange

1 year ago

4.7k
Animated cards with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

11.6k
Animated cards

Author:
Michael Andreuzza

1 year ago

6.5k
Hover effect card with background image
Beautiful card with background image, hover effect and gradient

Author:
Walid Ahmad

1 year ago

3.4k
Animated Profile Card
Animated profile card with profile completion circle

Author:
Shivam Vishwakarma

9 months ago

1.4k
Animated Info Card
Animated info card

Author:
Shivam Vishwakarma

9 months ago

1.2k
Card animate

Author:
Raul antonio de la cruz hernandez

9 months ago

1.1k
Card animate

Author:
Raul antonio de la cruz hernandez

9 months ago

1.1k
Dynamic Service Showcase with Interactive Flip Cards
This component presents a visually engaging service section featuring interactive flip cards. Each service card displays an image on the front and reveals details on the back when hovered over. The layout is responsive, ensuring seamless adaptability across various screen sizes. The hover effect adds a modern and engaging touch, enhancing user interaction.

Author:
Vikas Kushwah

7 months ago

928
Responsive Cards with Hover Text Reveal Animation - Built with Tailwind CSS
nhance your website with these sleek, responsive cards designed using Tailwind CSS! Featuring a stylish hover animation, the text smoothly reveals when you hover over the card, adding a dynamic touch to your user interface. Perfect for portfolios, team profiles, or project showcases, this design adapts seamlessly to all screen sizes.

Author:
Abdul Baset Bappy

7 months ago

1.3k
Responsive Projects Section

Author:
ariaw

7 months ago

911
Responsive Projects Section

Author:
ariaw

7 months ago

632

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components