Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create a flip card with CSS?

CSS Web Development Front End Technology

A flip card with CSS creates an interactive element that rotates to reveal content on the back when hovered. This effect uses CSS transforms and 3D perspective to create a smooth flipping animation.

Syntax

.flip-container {
    perspective: 1000px;
}

.flip-card {
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.flip-container:hover .flip-card {
    transform: rotateY(180deg);
}

.front, .back {
    backface-visibility: hidden;
}

.back {
    transform: rotateY(180deg);
}

Key Properties

Property Purpose
perspective Creates 3D space for the flip effect
transform-style: preserve-3d Maintains 3D positioning of child elements
backface-visibility: hidden Hides the back face when rotated away
transform: rotateY(180deg) Rotates the element around Y-axis

Example: Profile Card with Flip Effect

The following example creates a flip card that shows an avatar on the front and profile information on the back −

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: Arial, sans-serif;
        padding: 20px;
        background-color: #f0f0f0;
    }
    
    .flip-container {
        background-color: transparent;
        width: 300px;
        height: 300px;
        perspective: 1000px;
    }
    
    .flip-card {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.6s;
        transform-style: preserve-3d;
        cursor: pointer;
    }
    
    .flip-container:hover .flip-card {
        transform: rotateY(180deg);
    }
    
    .front, .back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    
    .front {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    
    .back {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        color: white;
        transform: rotateY(180deg);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 20px;
    }
    
    .avatar {
        width: 100px;
        height: 100px;
        background-color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 48px;
        color: #667eea;
        margin-bottom: 10px;
    }
</style>
</head>
<body>
    <h2>Hover to Flip the Card</h2>
    
    <div class="flip-container">
        <div class="flip-card">
            <div class="front">
                <div class="avatar">???</div>
                <h3>Profile Card</h3>
            </div>
            <div class="back">
                <h2>John Smith</h2>
                <p><strong>Position:</strong> Web Developer</p>
                <p><strong>Experience:</strong> 5 Years</p>
                <p><strong>Skills:</strong> HTML, CSS, JavaScript</p>
            </div>
        </div>
    </div>
</body>
</html>

A colorful gradient card with an avatar emoji and "Profile Card" text appears. When hovered, it smoothly flips to reveal profile information including name, position, experience, and skills on a different gradient background.

How It Works

The flip card effect works through these key mechanisms:

  • Perspective: The parent container sets a 3D perspective space
  • Transform-style: Preserves 3D positioning for child elements
  • Backface-visibility: Hides the back face when not visible
  • Rotation: The hover trigger rotates the card 180 degrees around the Y-axis

Conclusion

CSS flip cards provide an engaging way to display additional information on hover. The key is using 3D transforms with proper perspective and backface-visibility to create smooth, professional-looking flip animations.

Updated on: 2026-03-15T14:51:21+05:30

323 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements