The problem
You want a card that flips over to show different content on hover or click.
The solution
.flip-card {
perspective: 1000px;
width: 300px;
height: 400px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.flip-card-front {
background: linear-gradient(135deg, #1a1a2e, #16213e);
}
.flip-card-back {
background: linear-gradient(135deg, #3a7bff, #8b5cf6);
transform: rotateY(180deg);
}See it live
Put it to work
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h3>Front Side</h3>
<p>Hover to flip!</p>
</div>
<div class="flip-card-back">
<h3>Back Side</h3>
<p>Hidden content here</p>
</div>
</div>
</div>Worth knowing
Use transform-style: preserve-3d to enable 3D space. backface-visibility hides the reverse side.