You can create flipable card easily by tracking these steps.
HTML file:
<div class="wordCard">
<div class="cardFace frontFace">
<span>front</span>
</div>
<div class="cardFace backFace">
<span>back</span>
</div>
</div>
CSS file:
.wordCard {
width: 200px;
height: 300px;
position: relative;
perspective: 1000px;
cursor: pointer;
}
.cardFace {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
color: white;
width: 100%;
height: 100%;
border-radius: 10px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: transform .5s linear;
transform-style: preserve-3d;
}
.backFace {
background-color: blue;
transform: rotateY(180deg);
}
.frontFace {
background-color: green;
transform: rotateY(0deg);
}
.flipped .backFace {
transform: rotateY(360deg);
}
.flipped .frontFace {
transform: rotateY(180deg);
}
We have two type faces. Normal and flipped faces.
Our important property is backface-visibilty: hidden;
. This property helps us to hide back face of element.
Other important property is transform-style: preserve-3d;
. This property gives 3D rotate effect to element when it is rotating.
And JavaScript file:
var card = document.querySelector('.wordCard');
card.addEventListener('click', () => {
card.classList.toggle('flipped');
});
In above, we set click
event to toggle .wordCard
class. In this way, we could animate this card with transition duration.
Top comments (0)