DEV Community

Cover image for Flipping Card with CSS and Javascript
Shubham Tiwari
Shubham Tiwari

Posted on

Flipping Card with CSS and Javascript

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>
Enter fullscreen mode Exit fullscreen mode

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");
}
Enter fullscreen mode Exit fullscreen mode

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")
})
Enter fullscreen mode Exit fullscreen mode

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)