Flip Card
Pure CSS 3D card flip on hover using transform-style: preserve-3d and backface-visibility: hidden on both faces.
Flip Card the 13th of 27 designs in the 27 CSS Card Hover Effects collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="card-13">
<div class="card-13__inner">
<div class="card-13__front">
<span class="card-13__tag">Hover</span>
<h4 class="card-13__title">Flip Card</h4>
<p class="card-13__body">Hover to flip over.</p>
</div>
<div class="card-13__back">
<h4 class="card-13__back-title">The Back</h4>
<p class="card-13__back-body">Revealed with CSS 3D perspective.</p>
<span class="card-13__back-cta">Explore →</span>
</div>
</div>
</div> .card-13__tag {
font-family: monospace;
font-size: 10px;
padding: 2px 8px;
border-radius: 20px;
background: rgba(124, 108, 255, 0.15);
color: #7c6cff;
border: 1px solid rgba(124, 108, 255, 0.3);
display: inline-block;
margin-bottom: 10px;
}
.card-13__title {
font-size: 17px;
font-weight: 700;
color: #f0eeff;
margin-bottom: 6px;
}
.card-13__body {
font-size: 13px;
color: #b8b6d4;
line-height: 1.6;
}
.card-13 {
/* The face elements (__front, __back) are absolutely positioned and
give the parent zero intrinsic width. Use a fixed 280px width so
the card has a predictable size in any flex container (stage,
playground iframe). Same pattern as card-26. */
width: 280px;
max-width: 100%;
height: 155px;
perspective: 800px;
cursor: pointer;
}
.card-13__inner {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.card-13:hover .card-13__inner {
transform: rotateY(180deg);
}
.card-13__front,
.card-13__back {
position: absolute;
inset: 0;
border-radius: 14px;
padding: 22px;
backface-visibility: hidden;
}
.card-13__front {
background: #17171f;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.card-13__back {
background: linear-gradient(135deg, #7c6cff, #ff6c8a);
transform: rotateY(180deg);
display: flex;
flex-direction: column;
justify-content: center;
}
.card-13__back-title {
font-size: 17px;
font-weight: 700;
color: #fff;
margin-bottom: 6px;
}
.card-13__back-body {
font-size: 12px;
color: rgba(255, 255, 255, 0.8);
}
.card-13__back-cta {
display: inline-block;
margin-top: 10px;
font-size: 12px;
color: rgba(255, 255, 255, 0.9);
font-weight: 600;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}