Back to Components

3D Flip Card

An interactive card that flips in 3D space to reveal content on the back. Perfect for showcasing products, team members, or any dual-sided content with smooth perspective animation.

3D Effects Interactive Advanced

Live Preview

Front Side

Back Side

HTML

<div class="flip-card">
    <div class="flip-card-inner">
        <div class="flip-card-front">
            Front Side
        </div>
        <div class="flip-card-back">
            Back Side
        </div>
    </div>
</div>

CSS

.flip-card {
    width: 300px;
    height: 200px;
    perspective: 1000px;
}

.flip-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

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

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.5rem;
}

.flip-card-front {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.flip-card-back {
    background: linear-gradient(135deg, #f093fb, #f5576c);
    color: white;
    transform: rotateY(180deg);
}