Hello People🙋,
In this post, We will see how we can create Flip Card with CSS.
HTML:
<div class="card-container">
<div class="card">
<div class="side">
<h3>Front</h3>
</div>
<div class="side back">
<h3>Back</h3>
</div>
</div>
</div>
CSS:
/*card container with the height and width of 150px and used perspective for 3d*/
.card-container{
cursor:pointer;
height:150px;
width:150px;
perspective:600;
position:relative;
}
/*card to fit the size of the card container by giving the width and height of 100% and position of absolute which is relative to the card container*/
.card{
height:100%;
width:100%;
transform-style:preserve-3d;
position:absolute;
transition:all 1s ease-in-out;
}
/*card rotate from y axis on hover*/
.card:hover{
transform:rotatey(180deg);
}
/*Front side of the card with the property of backface visibility to make the other side of card hidden*/
.side{
backface-visibility:hidden;
height:100%;
width:100%;
position:absolute;
border-radius:6px;
background-color:limegreen;
}
/*back side of the card*/
.back{
transform:rotatey(180deg);
background-color:hotpink;
}
Happy Coding! 🙌
Top comments (0)