DEV Community 👩‍💻👨‍💻

Cover image for How to make a Flip Card?
Tilak Jain
Tilak Jain

Posted on • Originally published at

How to make a Flip Card?

You may have seen Hover Cards on which when we hover, some action happens with some effects.
So today we are going to make a flip card
First of all What is flip card?
A card on which when we hover it will flip and show the back side. Flip Effect can be used for cards like visiting card, etc.

Let us get started!


<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Front Side</h2>
    <div class="flip-box-back">
      <h2>Back Side</h2>
Enter fullscreen mode Exit fullscreen mode

2. CSS

.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */

/* This is to position the front and back side */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;

/* Do an horizontal flip when you move hover on container */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);

/* Put the front and back side */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;

/* Style the front side */
.flip-box-front {
  background-color: #bbb;
  color: black;

/* Style the back side */
.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
Enter fullscreen mode Exit fullscreen mode

See an Example below:

Hope you have made flip card successfully!
That is it for this blog.

Top comments (0)

16 Libraries You Should Know as a React Developer

Being a modern React developer is not about knowing just React itself. To stay competitive, it is highly recommended to explore the whole ecosystem. This article contains some of the most useful React component libraries to speed up your developer workflow.