CSS

Making 3D CSS Flippable Cards

📣 Sponsor

A while back, I wrote an article on 3d interactive CSS buttons. Using a similar technique, I decided to design some 3d interactive (and flippable) CSS user cards. These also work great for lots of different things - for example, a bank card UI, a playing card UI, or just a teams page. The demo can be seen below!

The full code, as always, is Available on CodePen.

3d flippable cards with CSS and Javascript

Hover over the cards (or tap anywhere on the card on mobile) below to see the effect in full swing.

Unflip Flip

About

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet est nunc.

Unflip
Flip Jane Smith Engineering Message

About

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet est nunc.

Unflip
Flip John Doe VP Software Message