Post thumbnail: 19 CSS Flip Cards

19 CSS Flip Cards

Collection of hand-picked free HTML and CSS flip card code examples. Update of September 2018 collection. 3 new examples.

Related Articles

  1. CSS Cards
  2. CSS Blog Cards
  3. CSS Card Hover Effects
  4. CSS Card Layouts
  5. CSS Material Design Cards
  6. CSS Movie Cards
  7. CSS Product Cards
  8. CSS Credit Cards
  9. CSS Profile Cards
  10. CSS Recipe Cards
  11. CSS Business Cards

Author

  • Jonno Witts

Made with

  • HTML / CSS (SCSS) / JavaScript

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

Demo image: CSS Flip Cards CSS Flip Cards - GIF Demo

Author

  • Kacper

Made with

  • HTML / CSS (SCSS)

About the code

CSS Flip Cards

Pure CSS clickable flip cards.

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

Dependencies: font-awesome.css

Author

  • Piotr Galor

Made with

  • HTML / 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: -

Demo image: Responsive Flip Card Grid Responsive Flip Card Grid - GIF Demo

Author

  • Oliver Knoblich

Made with

  • HTML / CSS / JavaScript

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

Demo image: Figcaption for Flipping Card

Author

  • Alex Paul

Made with

  • HTML / CSS / JavaScript

About the code

Figcaption for Flipping Card

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

Dependencies: font-awesome.css

Demo image: Flipping Card Flipping Card - GIF Demo

Author

  • Dmitry Korobov

Made with

  • HTML / CSS (Sass)

About the code

Flipping Card

Simple CSS flipping card.

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

Dependencies: -

Demo image: CSS 3D Flip Cards CSS 3D Flip Cards - GIF Demo

Author

  • Welling Guzman

Made with

  • HTML (Pug) / CSS (Less)

About the code

CSS 3D Flip Cards

CSS 3D diagonal flip cards.

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

Dependencies: -

Demo image: Flippy Cards Flippy Cards - GIF Demo

Author

  • Kayleigh

Made with

  • HTML / CSS (SCSS)

About the code

Flippy Cards

Simple HTML and CSS flippy cards.

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

Dependencies: -

Demo image: HTML and CSS Flip Cards HTML and CSS Flip Cards - GIF Demo

Author

  • Arash Rasteh

Made with

  • HTML / CSS (SCSS)

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

Demo image: Pure CSS Flip Cards Pure CSS Flip Cards - GIF Demo

Author

  • Aron

Made with

  • HTML / CSS (SCSS)

About the code

Pure CSS Flip Cards

Pure CSS card with attractive horizontal and vertical flip.

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

Dependencies: -

Author

  • Charles Ojukwu

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Card Flip

3D card flip effect with a 3D button.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: 3D Product Cards

Author

  • Zac

Made with

  • HTML / CSS (Sass) / JavaScript (Babel)

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: -

Demo image: Parallax Card Parallax Card - GIF Demo

Author

  • Hakkam Abdullah

Made with

  • HTML / CSS

About the code

Parallax Card

CSS flip card with parallax effect.

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

Dependencies: -

Demo image: Parallax Flipping Cards Parallax Flipping Cards - GIF Demo

Author

  • Tyrell Rummage

Made with

  • HTML / CSS

About the code

Parallax Flipping Cards

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

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

Dependencies: -

Demo image: Element Card Group Element Element Card Group Element - GIF Demo

Author

  • Mario Duarte

Made with

  • HTML / CSS (SCSS) / JavaScript (Babel)

About the code

Element Card Group Element

Card UI with a simple 3D interaction.

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

Dependencies: jquery.js

Demo image: 3D Flipping Cards

Author

  • Rita Bradley

Made with

  • HTML / CSS (SCSS)

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

Demo image: Ampersand Flash Card

Author

  • Eina O

Made with

  • HTML / 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: -

Demo image: Flipping Card Flipping Card - GIF Demo

Author

  • Sergey Nikishkin

Made with

  • HTML / CSS / JavaScript

About the code

Flipping Card

Flipping card with activation button.

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

Dependencies: jquery.js

Demo image: 3D Flip Card 3D Flip Card - GIF Demo

Author

  • Nicola Mihaita

Made with

  • HTML / CSS / JavaScript

About the code

3D Flip Card

Realistic 3D image flip box/card.

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

Dependencies: jquery.js

back to top