How to create flip card with CSS?
The flip cards are those which cover the information on both sides. On-webpage the flip card shows the back of the cards on hover with some additional information. In this tutorial, we will design a flip card with CSS.
Creating a flip card
- The flip card contains two <div> container . The inner
<div> is wrapped inside the outer <div> container.
- The outer <div> should be some specified
height, width and border for card structure.Further, it is added with CSS perspective for 3-D effect
- The inner <div> for flip card is added with height:100% and width:100%. It is added with
position: relative for positioning the front and back of the flip card. Add transition to flip card.
- The inner <div> contains the card's front face and back face. Both are
position: absolute to the inner div. Also, the backface is set to hidden.
- Add
transform: rotateY(180deg) to rotate the card. Add it within :hover class so that card flips on hover.
- Additionally, some
background-color and other CSS properties to customize the front face and back face of the card.
Example: Creating a flip card with CSS
Here is an example where we have created a simple flip card.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
.outer-card {
width: 300px;
height: 200px;
perspective: 1000px;
}
.inner-card {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
}
.outer-card:hover .inner-card {
transform: rotateY(180deg);
}
.font-face, .font-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
.font-face {
background-color: cyan;
color: black;
}
.back-face {
background-color: blue;
color: white;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="outer-card">
<div class="inner-card">
<div class="font-face">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1628516205-101156.png">
</div>
<div class="back-face">
<h2> The back-face </h2>
<p> Back face of card </p>
</div>
</div>
</div>
</body>
</html>
Output
Here is the output of the above program.
The front face
The back face
Example: Creating a flip card with some CSS styling
Here is another sample of flip cards with additional CSS styling.
Conclusion
In this tutorial, we have learned to create a flip card with CSS. The rotate property is used to flip the card. We can customize it with other CSS properties.
