Hello, in this tutorial, I will show you how to create the card flip animation when you hover on the element.
Card Flip
How to do the Card Flip hover animation in minutes.
Setting up the HTML Page
To begin, add a div element and apply the card-container class to it.
<div class="card-container">
</div>
The approach is to create a box to store the contents of a card. Then we’ll use this box to enable us to hover over on top of it and apply the transforms to the elements inside to do the card flip animation
Add a div element inside the container and apply the card class to it. Inside the card div, add 2 additional div elements, one for the card’s back and one for the front of the card.
Create a CSS file and add it to the page.
<link rel="stylesheet" href="./index.css">
Building the CSS
Go to the CSS file and create the selector for card, card-container, card-front, and card-back.
.card-container {
}
.card {
}
.card-back {
}
.card-front {
}
For card-container set the width and height to 15em and 20em and then set the perspective to 40em. This will allow us to do 3D transforms inside the container.
For card, set:
The width and height to 100% so it’ll take the size of the box
The position to relative so we can stack contents on top of each other inside
The transition-duration to 2 seconds, transition-property to transform, transform-style to preserve-3d
The Y rotation to 0 degrees.
Using transition-duration will allow it to gradually go from one value to another in a set amount of time. So, when we set the rotation to 0 degrees and then change it to 180 degrees later, it will gradually go from 0 to 180 degrees in 2 seconds. This will create the effect that the card is being flipped.
The transition-property is used to set the type of transition we are trying to track. When we set it to transform, it means we want to see if there are any changes made to the transforms of the element. If there are, the transition duration will kick in.
Transform-style: preserve-3d will allow us to keep the 3d transformation after the transform is completed.
Now for card-back, give it a background color so we can see it.
.card-back {
background-color: aqua;
}
For card-front, set the rotation to 180 degrees to start and then set the background color.
.card-front {
transform: rotateY(180deg);
background-color: rgb(255, 255, 255);
}
We want to rotate the front of the card 180 degrees because everything is facing us by default. Since we want to back of the card to face us, the front of the card needs to be facing the opposite direction.
For the next step, create a joint selector group for card-back and card-front. Then set the width and height to 100%, position to absolute, top and left to 0, and backface-visibility to hidden.
By setting backface-visibility to hidden, it will hide the mirror version of the element.
Every element you add to the page, there’s always the side we can see and then there is a mirror version on the back. So when we rotate it, we can see the reversed image of the element. For the card-flip effect, we need to remove it so it will not overlap what we’re doing.
If we look at the result, we have a card on the page with the back of the card facing us.
To add the flip effect, create another selector for the card-container and then apply the hover pseudo class to it. Since we want the hover effect to affect the card, add the card class after the selector.
.card-container:hover .card {
}
Now all we have to do is to set the Y rotation to 180 degrees using transform and the rotateY() function.
.card-container:hover .card {
transform: rotateY(180deg);
}
Download source code
https://codeible.com/coursefiles/cardflipwithhover
