Post thumbnail: 16 CSS Flip Cards

16 CSS Flip Cards

Collection of hand-picked free HTML and CSS flip card code 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

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

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

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