About CSS Flip Card

3D hover-flip card using perspective + backface-visibility. Part of the DevTools Surf developer suite. Browse more tools in the CSS collection.

Use Cases

• Frontend developers creating interactive product cards with flip reveals
• E-learning designers building flashcard study interfaces
• Portfolio developers showcasing project details on card back faces
• UI designers prototyping 3D card interactions for image galleries

Tips

• Hover triggers a 3D Y-axis rotation revealing the back face content
• Set perspective value to control the depth of the 3D flip effect
• Use backface-visibility: hidden to prevent the back face from showing through

Fun Facts

• CSS 3D transforms with perspective and backface-visibility were first implemented in WebKit in 2009, making flip cards possible without Flash for the first time.
• The backface-visibility property has only two values (visible and hidden) and was specifically designed for 3D card-flip scenarios — it has almost no other practical use case.
• Flash-based card flip animations were a staple of early 2000s web design — when Steve Jobs refused to support Flash on iPhone in 2010, CSS 3D transforms became the only path forward.

FAQ

What CSS properties power the flip?

`perspective` on the container, `transform: rotateY(180deg)` on hover, and `backface-visibility: hidden` on both faces so only one is visible at a time.

Does it work on mobile touch?

Hover isn't triggered on touch. The tool includes an `:focus-within` fallback so tabbing into the card flips it. JS is needed for tap-to-flip.

Can I flip on click instead of hover?

Yes — the tool has a radio-input-based variant where clicking toggles `:checked` and the sibling card flips. Pure CSS, no JS.

What about 3D perspective?

Tunable — 1000px perspective is a natural default. Lower values exaggerate the 3D effect; higher values flatten it.