Log in

How to Make a 3D Flip Card in Pure CSS

By Purely CSS · Published October 9, 2026

A CSS flip card is a card with a front and a back that turns around in 3D when you hover over it. It needs three things: perspective on the container, transform-style: preserve-3d on the inner wrapper, and backface-visibility: hidden on both faces. No JavaScript is involved.

1. The basic flip card

The outer element sets the perspective, which gives the rotation depth. The inner element holds both faces and rotates 180 degrees on hover. Each face is positioned on top of the other, and the back face is pre-rotated so it reads correctly after the flip.

<div class="flip">
  <div class="inner">
    <div class="face front">Front</div>
    <div class="face back">Back</div>
  </div>
</div>

2. Make it work for keyboard users

A hover-only card cannot be reached with the keyboard. Add tabindex="0" to the card so it can take focus, and flip it on :focus-within as well as :hover.

<div class="flip" tabindex="0">
  <div class="inner">
    <div class="face front">Front</div>
    <div class="face back">Back</div>
  </div>
</div>

Tips

  • Do not put essential information only on the back. Some people never hover or flip it.
  • Add -webkit-backface-visibility for older Safari if you support it.
  • Honor prefers-reduced-motion by shortening the transition or switching faces with opacity instead.

Common questions

How do I flip a card in CSS?

Give the container perspective, set transform-style: preserve-3d on the inner wrapper, hide the back of both faces with backface-visibility, and rotate the wrapper 180 degrees on :hover.

Why can I see both sides of my flip card?

backface-visibility: hidden is missing on one of the faces, or transform-style: preserve-3d is missing on the parent.

Can a flip card work on touch screens?

Use :focus-within with tabindex, or a hidden checkbox toggled by tapping a label, because touch screens have no hover.

Want more examples?

Browse the full collection of pure CSS cards, or try your own code in the playground.

More guides