Hello everyone, today I'll demonstrate how to make a flip-card using HTML, CSS, and Javascript. The full code will be available at codepen, which I will share at the end of this blog, and I will explain the main CSS section.
Let's get started...
HTML -
<div class="card">
<div class="front">
{All the content for the front side goes here}
</div>
<div class="back">
{All the content for the back side goes here}
</div>
<!-- Button to toggle front and back side of the card -->
<button class="toggle">Toggle Button</button>
</div>
CSS -
.card{
/* All the card related stylings goes here*
}
/* Front side styling */
.
.
/* Back side styling */
.back{
/* Hiding the backside initially */
display:none;
}
.
.
/* Toggle Button Styling */
.
.
/* To show the frontside or backside by
adding this class using JS */
.show{
display:block;
}
/* To hide the frontside or backside by
removing this class using JS */
.hide{
display:none;
}
/* To flip the card 360deg rotation on Y axis */
.flip__card{
transform:rotateY(-360deg)
}
/* To change the background image of the card
when the backside is visible */
.change_bg{
background-image:url("some other image");
}
Javascript -
const card = document.querySelector(".card");
const frontSide = document.querySelector(".front");
const backSide = document.querySelector(".back");
const toggleButton = document.querySelector(".contact__toggle")
// Adding a click event on the toggle button
toggleButton.addEventListener("click",(e) => {
/* By switching these classes, the card will spin and its
background color will be changed.*/
card.classList.toggle("flip__card")
card.classList.toggle("change_bg")
/* Toggling the hide and show for front and back
when the front is visible, back will be hidden
and vice versa */
frontSide.classList.toggle("hide")
backSide.classList.toggle("show")
// changing the button text based on its current side
e.target.textContent = e.target.textContent === "Contact" ? "User Info" : "Contact"
// Changing the button background color to match
//with the theme
e.target.classList.toggle("bg-brown")
})
Codepen -
THANK YOU FOR CHECKING THIS POST
You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--
Also check these posts as well
https://dev.to/shubhamtiwari909/css-iswherehas-and-not-2afd
https://dev.to/shubhamtiwari909/theme-changer-with-html-and-css-only-4144
https://dev.to/shubhamtiwari909/swiperjs-3802
https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90
Top comments (0)