24 CSS Flip Cards

About a code

Pricing Pure CSS Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: unicons.css

About a code

Interactive and Responsive Card with Space Theme

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Card Flip Reflection

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Flipping Card Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

UI - Flip Card

Flip card (using :focus-within for a11y).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Fallout 76 CSS Slugger Perk Card

A CSS only (with a bit of native JS interaction) recreation of a Fallout 76 perk card. I saw the perk cards while checking out some videos. At first I thought the notch/bump in the corner would be interesting to recreate in CSS, however as I was building it I realised that there were lots of bits that would be interesting to create in CSS. In particular the conic gradient (used for the background on the front of the card). It's not yet supported outside of Chrome (using a fall back) but it's a neat piece of CSS. Other bits used: various CSS shapes using overlaps (the stars), Google Fonts, animations, gradients with stops, and all rems for easy resizing at different device sizes.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: conic-gradient.js

About the code

CSS Flip Cards

Pure CSS clickable flip cards.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

About the code

Tricky CSS Hover

Experimenting in 3D, VR inspired card layout feat. skateboarding theme.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Responsive Flip Card Grid

Responsive flip card grid with 1:1 aspect ratio.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: bootstrap.css, jquery.js

About the code

Figcaption for Flipping Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

About the code

Flipping Card

Simple CSS flipping card.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

CSS 3D Flip Cards

CSS 3D diagonal flip cards.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Flippy Cards

Simple HTML and CSS flippy cards.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

HTML and CSS Flip Cards

3D flip cards pure CSS and HTML.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: bootstrap.css

About the code

Pure CSS Flip Cards

Pure CSS card with attractive horizontal and vertical flip.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Card Flip

3D card flip effect with a 3D button.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

3D Product Cards

A project I used to learn a little bit more about using 3D CSS properties and some practice with more performant animated shadow effects. The little things that make me happy: more performant box-shadow transitions. Box shadow is applied to :after and only the opacity is being animated.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Parallax Card

CSS flip card with parallax effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Parallax Flipping Cards

Parallax flipping cards. The parallax delay really does it justice.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Element Card Group Element

Card UI with a simple 3D interaction.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

About the code

3D Flipping Cards

Just a cute little card flipping demo. Not a game yet, but still nice to look. Hover over the cards to see what I mean!

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: bootstrap.css

About the code

Ampersand Flash Card

CSS ampersand flash card with knockout text and flip animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Flipping Card

Flipping card with activation button.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

About the code

3D Flip Card

Realistic 3D image flip box/card.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js