Creating a responsive flip card using HTML, CSS, and JavaScript

In today's world, where everything is becoming digital, it is important to have engaging and interactive content on your website. One way to do that is by creating a flip card that responds to user actions. A flip card is a graphical representation of a card that has two sides: a front side and a backside. It can be used to showcase products, services, or even a team member's profile. In this tutorial, we will create a responsive flip card using HTML, CSS, and JavaScript.

HTML Structure

Let's start by creating the basic HTML structure of our flip card. We will use the following code for that:

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="front-image.jpg" alt="Front Image">
      <h3>Front Title</h3>
      <p>Front Content</p>
    </div>
    <div class="flip-card-back">
      <img src="back-image.jpg" alt="Back Image">
      <h3>Back Title</h3>
      <p>Back Content</p>
    </div>
  </div>
</div>

Here, we have used a div element with a class of flip-card to represent our flip card. Inside this, we have another div element with a class of flip-card-inner. This will be used to represent the front and back sides of our flip card. Inside the flip-card-inner div, we have two more div elements - one for the front side of the card and one for the back side. We have added an img element, a h3 element, and a p element inside each of these div elements to represent the content of the card.

CSS Styling

Now, let's move on to styling our flip card. We will use the following CSS code for that:

.flip-card {
  background-color: transparent;
  perspective: 1000px;
  width: 300px;
  height: 400px;
  margin: 0 auto;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #fff;
}

.flip-card-back {
  background-color: #fff;
  transform: rotateY(180deg);
}

Here, we have styled the flip-card class to set the background color as transparent and define the perspective for the flip animation. We have also set the width and height of the card and centered it on the page using margin: 0 auto;.

Next, we have styled the flip-card-inner class to set its position as relative and define the transition for the flip animation. We have also set the transform-style property to preserve-3d to allow 3D transformations on child elements.

We have added a hover effect to the flip-card-inner class to rotate the card 180 degrees on the Y-axis when the user hovers over it. We have also styled the flip-card-front and flip-card-back classes to set their position as absolute and set the backface-visibility to hidden to prevent flickering during the flip animation.

Finally, we have added specific styling to the front and back sides of the card by setting their background color and transform properties. The back side of the card is initially rotated 180 degrees to hide it behind the front side.

JavaScript Functionality

Now that our HTML and CSS are in place, we can add some JavaScript to make our flip card interactive. We will use the following code for that:

const flipCards = document.querySelectorAll('.flip-card');

for (let flipCard of flipCards) {
  flipCard.addEventListener('click', function() {
    this.querySelector('.flip-card-inner').classList.toggle('flip');
  });
}

Here, we have used querySelectorAll to select all the flip cards on the page and added an event listener to each of them. When the user clicks on a flip card, the flip class is toggled on the flip-card-inner element, which triggers the flip animation.

Making the Flip Card Responsive

Finally, to make our flip card responsive, we will use media queries to adjust the styling based on the screen size. We will use the following code for that:

@media only screen and (max-width: 768px) {
  .flip-card {
    width: 100%;
  }
}

Here, we have used a media query to set the width of the flip card to 100% when the screen size is smaller than 768 pixels.

Conclusion

In this tutorial, we have created a responsive flip card using HTML, CSS, and JavaScript. We have used basic HTML elements and CSS properties to create the flip card and added JavaScript to make it interactive. We have also made the flip card responsive by using media queries. With this knowledge, you can create engaging and interactive content for your website and impress your visitors.