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 EngineeringAbout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet est nunc.
Unflip Flip John Doe VP Software