In this post, we'll learn about how to create a stylish 3D flip card animation using HTML and CSS with gradient backgrounds.
.jpg)
Understanding the Structure
We’ll be using two sides for the card—front and back—to create a flipping effect. This effect will be activated on hover, using CSS transitions.
HTML Code
<div class="card">
<div class="card-side front">
<div>Front Side</div>
</div>
<div class="card-side back">
<div>Back Side</div>
</div>
</div>
This simple HTML structure contains a
div element with two sides:
one for the front and one for the back.
CSS
.card {
perspective: 150rem;
position: relative;
height: 40rem;
max-width: 400px;
margin: 2rem;
box-shadow: none;
background: none;
}
.card-side {
height: 35rem;
border-radius: 15px;
transition: all 0.8s ease;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 80%;
padding: 2rem;
color: white;
}
.card-side.back {
transform: rotateY(-180deg);
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%,#FFCC70 100%);
}
.card-side.front {
background-color: #0093E9;
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}
.card:hover .card-side.front {
transform: rotateY(180deg);
}
.card:hover .card-side.back {
transform: rotateY(0deg);
}
backface-visibility: Hides the content on the back of the card when the front is visible, and vice versa.
set rotateY() for the back side of the card to -180deg and the front side to 0deg.
perspective: Adds depth to the 3D effect by allowing the card to appear as though it's flipping in space.
Upon hover, set rotateY() for the front side to 180deg and backside to 0deg.
Conclusion
With just a few lines of HTML and CSS, you can create a stunning 3D flip
card animation that adds a dynamic touch to your website. Try experimenting
with colors and effects to make it uniquely yours
.jpg&description=How to Create 3D Flip Card Animation Using HTML and CSS){kind=link}