How To Make 3D Flip Card Using HTML and CSS

How To Make 3D Flip Card Using HTML and CSS

CSS Flip Card

In this article, you will learn how to create a 3D Flip Card using HTML and CSS. CSS flip card is used in different places. This type of card flip effect CSS is used in various image galleries, and team section profile cards.

In the case of the flip card, if you click on the element or move the mouse, it will rotate 180 degrees and you can see the back of the element. 

This card will contain information on both sides. Under normal circumstances, we will see the information on the front.

CSS Flip Card

When you click on the 3d flip card, you can see the information on the back. It is made up of a little bit of HTML and CSS. This is a basic design that you can copy and use in your work.

See the Pen
CSS Card Flip On Hover by Shantanu Jana (@shantanu-jana)
on CodePen.

The demo section above will help you to know how it works. From here you will get the required source code. 

Although there are many more options for downloading source code. The article has a code section below where you can get all the codes together.

How to make a 3d flip card in CSS

You will also get a download button at the bottom. From where you can download all the codes with a single click.

Step 1: Basic structure of the card

The basic structure of this CSS 3D Flip Card has been created and designed using the following HTML codes. Flip Card width: 300px, height: 300px used. Here the box shadow is used to highlight the card.

<div class=”flip-card” tabIndex=”0″>
  <div class=”flip-card-inner”>
 
  </div>
</div>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
3D Flip Card Using HTML and CSS

Step 2: Attach 3D Flip to the card

Now this card has been converted to a 3D Flip Card. RotateY (180deg) has been used using only transform to flip the card.

Since we want the card to rotate along the y axis which is rotated 180deg along the axis. Here 3D flip of the card will work in both hover and focus.

.flip-card:focus {
    outline: 0;
}
.flip-card:hover .flip-card-inner,
.flip-card:focus .flip-card-inner{
  transform: rotateY(180deg);
}
3D Flip Card Using HTML

Step 3: Add information to the front of the card

Now I have added some information on the front of the card. Basically, I have added a simple heading. Here linear-gradient color is used in the background.

<div class=”flip-card-front”>
  <h3>Hover, please!</h3>
</div>
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.flip-card-front {
  background: linear-gradient(to left, #4364f7, #6fb1fc);
  color: black;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
Add information to the front of the card

Step 4: Information on the back of the 3D Flip Card

Now I have added the various information on the back of the card and designed it.

<div class=”flip-card-back”>
  <h3>Whoaaa!!!</h3>
</div>
.flip-card-back {
  background: linear-gradient(to right, #4364f7, #6fb1fc);
  color: white;
  transform: rotateY(180deg);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
h3 {
  font-size: 20px;
  font-family: Verdana, sans-serif;
  font-weight: bold;
  color: #fff;
}
Information on the back of the 3D Flip Card

Card Flip Effect CSS

This 3D Flip Card has been completed. If you can’t assemble the code above, use the section below. In this code section, you will get all the source codes together. 

Create an HTML and CSS file. Then add the following HTML codes to the HTML file and the CSS codes to the CSS file.

See the Pen
CSS Card Flip On Hover by Shantanu Jana (@shantanu-jana)
on CodePen.

If you do not have an ID for programming or coding, you can download the code directly. Please comment on how you like this CSS flip card. 

If there is any problem while making this 3D Flip Card then don’t forget to let us know by commenting.