In this article we will create a simple flip card that can be used anywhere on the websites.
First create an HTML file with the following code in the <body></body> tag.
<body>
<div class="card">
<div class="card-inner">
<div class="card-frontside">
<h1>Front Side</h1>
</div>
<div class="card-backside">
<h1>Back Side</h1>
</div>
</div>
</div>
</body>
Then add some CSS as given below:
/*for setting the width and height of the card*/
.card{
width: 300px;
height: 300px;
margin: 10% auto;
perspective: 500px;
padding: 2%;
}
/*for positioning front side and back side*/
.card-inner{
transform-style: preserve-3d;
width: 300px;
height: 300px;
transition: transform 1s;
}
/*Positioning front side and back side*/
.card-frontside,
.card-backside{
position: absolute;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
width: 300px;
height: 300px;
}
/*for styling the backside*/
.card-backside{
transform: rotateY(180deg);
background-color: black;
color: beige;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
}
/*for styling the frontside*/
.card-frontside{
background-color: blue;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 5px;
}
/*When you drag the mouse pointer above the box, it will flip.*/
.card:hover .card-inner{
transform: rotateY(180deg);
}
.png)
No comments:
Post a Comment