5 Pure CSS3 with JSPublished 2026-10-04Free · no sign-up
Eight cards that reveal a second face: a 3D flip on hover and focus, a flashcard that flips on a button, a top-over-bottom flip, a team profile, a pricing card with features on the back, a softer fade reveal, a dashboard stat tile and a reveal-your-code coupon.
A card that turns over in 3D to reveal its back. perspective on the wrapper gives depth, backface-visibility hides the reverse side of each face, and the flip also happens on :focus-within so keyboard users can reach the link on the back.
View code
<div class="flip" tabindex="0" aria-label="Lisbon trip card, focus to see details">
<div class="inner">
<div class="face front"><b>Lisbon</b><span>4 nights from $640</span></div>
<div class="face back"><p>Flights, a riverside hotel and a tram day pass.</p><a href="#">View trip</a></div>
</div>
</div>
A flashcard that flips when you press its button rather than on hover, which works on touch screens. The button toggles aria-pressed, and the hidden face is made inert so it cannot be focused or read until the card is turned over.
View code
<div class="fc2">
<div class="in">
<section class="f q"><p>What does the CSS property <code>gap</code> control?</p></section>
<section class="f a" inert><p>The space between rows and columns in grid, flex and multi-column layouts.</p></section>
</div>
<button aria-pressed="false">Show answer</button>
</div>
A product card that flips top-over-bottom with rotateX instead of side to side, showing materials and care details on the back. The motion direction is just a change of axis, so it is easy to match the flip to the layout of a grid.
A team card with a photo-style avatar and name on the front, and a short bio with contact links on the back. Because links live on the back face, the card also flips on focus, so pressing Tab reveals the bio before the links receive focus.
View code
<div class="tm" tabindex="0" aria-label="Amara Diallo, Head of design">
<div class="ti">
<div class="ts front"><span class="av" aria-hidden="true">AD</span><b>Amara Diallo</b><span>Head of design</span></div>
<div class="ts back"><p>Ten years designing for retail, from shop windows to checkout flows.</p><nav aria-label="Amara's links"><a href="#">Email</a><a href="#">LinkedIn</a></nav></div>
</div>
</div>
A plan card with the price on the front and the full feature list on the back, revealed by a See features button. The card height stays fixed during the flip, and the button on each side moves focus to the button on the other side.
An alternative to a 3D flip: the back content fades and slides up over the front on hover or focus. It suits subtle designs and avoids motion sickness concerns with rotation, and the reduced-motion version simply swaps the layers instantly.
View code
<a class="cf" href="#">
<span class="cf-front"><b>Autumn menu</b><small>12 new dishes</small></span>
<span class="cf-back"><b>Now serving</b><small>Roasted squash soup, wild mushroom risotto and pear tart. Book a table.</small></span>
</a>
A small dashboard tile showing a headline number on the front and a breakdown on the back. Tiles flip on hover and focus, which lets a dense dashboard stay simple while still giving detail on demand; the front number is also available as text on the back.
View code
<div class="st" tabindex="0" aria-label="Orders this week: 248, focus for breakdown">
<div class="sti">
<div class="sf"><small>Orders this week</small><b>248</b><span>▲ 12% vs last week</span></div>
<div class="sf sb"><small>248 orders</small><ul><li>Web <b>171</b></li><li>Marketplace <b>58</b></li><li>In person <b>19</b></li></ul></div>
</div>
</div>
A promotional card that reads Tap to reveal your code and flips to show a discount code with a copy button. The code is plain text, so it can be selected, and the copy button confirms with a short status message announced by screen readers.
Set perspective on the outer element, transform-style: preserve-3d on the inner one, and backface-visibility: hidden on both faces. The back face starts rotated 180 degrees, and turning the inner layer shows it.
Hover is not enough
Touch screens have no hover and keyboard users cannot hover. Flip on :focus-within as well, make the card focusable, or use a button that toggles the flip, as the flashcard and pricing demos do.
Hide the face you cannot see
A flipped-away face is still in the page. If it contains links or buttons, make it inert while hidden so keyboard focus and screen readers only reach the visible side.
Respect reduced motion
Large rotations can make some people feel unwell. Every demo removes the transition when prefers-reduced-motion is set, and the fade reveal offers a calmer alternative.
Frequently asked questions
Do flip cards need JavaScript?
Hover and focus flips do not. Button flips need a few lines to toggle a class and inert.
Why does the back look mirrored?
The back face must be rotated 180 degrees in its starting position, or it shows reversed after the flip.
Can I flip vertically?
Yes. Use rotateX instead of rotateY, as in the vertical demo.