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 Material Design 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