Home / UI Demos / Cards

Cards

Cross-Browser Flip Card

A GSAP powered cross-browser 3D flip card sample. Basically it uses two different elements that are animated at the same time to create the flip card, without using preserve-3d which is not supported by IE. Tutorial/codes – Demo Author: Rodrigo Hernando Created: MARCH 10, 2017 Made with: HTML, CSS and …

Read More »

Flipping Cards

Horizontal flipping cards on CSS Tutorial/codes – Demo Author: Nicola Markelov Created: OCTOBER 13, 2015 Made with: HTML, CSS Find the Demo See the Pen Flipping Cards by Nicola Markelov (@nicolamarkelov) on CodePen.

Read More »

Pure CSS Flip Card

Pure CSS Flip Card Tutorial/codes – Demo Author: Aron Created: MARCH 12, 2018 Made with: HTML, CSS Find the Demo See the Pen Pure CSS Flip Card by Aron (@Aoyue) on CodePen.

Read More »

3D Profile Flip Card

These are 3D Profile Flip Cards. Click the i to flip the card. The concept started out as a hover event, but that proved challenging on a mobile device, so I opted to use a bit of js to change out classes on click/touch. There are a variety of flip …

Read More »

3D Flip Card Effect

3D flip cards implemented with CSS3 Tutorial/codes – Demo Author: Samet Erpik Created: AUGUST 23, 2014 Made with: HTML, CSS and JavaScript Find the Demo See the Pen 3D Flip Card Effect by Samet Erpik (@samerpik) on CodePen.

Read More »

Multi Flip Cards

My goal was to create re-useable card-like elements that flip on hover (or tap!). I’ve built markup for a flippable card that you can use to hold any content you want on the front or the back of the card. Simply set the size of the containing .flip-card element and …

Read More »