Interactive card design with text clip-mask + background-clip linear-gradient animation.

Animated Business Card with flip effect

Based on the real sizes of a standard business card, but it flips with shine. Needs more shadow!

Animated Press Card

The game will save your stats locally, via localStorage.

A Simple card flip effect using Anime.js

This is an online version of the business card.

Using grid inside flex, instead of the other way around

In this article, we listed the hand-picked awesome flipping cards developed using CSS, html, JavaScript, jQuery, AngularJs, VueJs, ReactJs, etc. Listed tutorials well played with 3d, gradients, etc. some of the flip cards are having beautiful animation effects using transitions. Demo and download available on each tutorial. Flip cards can be used directly without any changes and could be small changes based on your needs.

Article will be helpful for designers and non-coders.

Comment your favorite flip card(s) or comment the card(s) which you admired from external resource.

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 put whatever you want into .front and .back and style accordingly. It gracefully degrades too: Webkit: Cards flip with a 3D effect Firefox & IE10: Cards flip but no 3d effect IE9 and down: Back instantly appears on hover

Pure CSS clickable flip cards using only css

Flipping card UI

Learn How to Create Quick and Simple React Flipping Card tutorial

Hover/Click on album cover to show controls.

Rotation effect with only CSS using transform, and HTML content created with JSON.

Flip Cards using Jquery

The physical world is so last year. Save the trees with a digital business card.

Simple profile flip card using CSS

Flip cards using Bootstrap 4