Back To Tutorials

Flipping Card Animation in JavaScript

Beginnerchallenge

In this challenge, you will create a flipping card animation using HTML, CSS, and JavaScript. The animation will involve a card that flips to reveal its back side when clicked. This will help you learn how to use CSS transformations and transitions to create interactive animations, and how to control them with JavaScript.

Objective:

  • Implement a card flip animation using CSS for the flip effect.
  • Control the card's flip state with JavaScript to trigger the animation on user interaction.
  • Optionally, add content to the front and back of the card.

Requirements:

  1. Create an HTML structure for the card with front and back sides.
  2. Use CSS to define the flip animation with transform and perspective.
  3. Use JavaScript to handle user interactions and trigger the flip animation.
  4. Ensure smooth flipping and proper alignment of the card sides.

Steps:

  1. Create the HTML Structure:

    • Add a div element for the card container with two child divs for the front and back sides of the card.

  2. Style and Animate the Card with CSS:

    • Apply perspective to the container to give a 3D effect.
    • Use transform to rotate the card and show the front or back side.

  3. Control the Animation with JavaScript:

    • Add event listeners to handle clicks or other interactions to toggle the card flip.

  4. Optional Enhancements:

    • Add content to the card’s front and back sides, such as images or text.
    • Add transitions for smooth flipping.

Resources:

Level: Intermediate

This challenge is designed for learners with an intermediate understanding of HTML, CSS, and JavaScript.

Solution:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flipping Card Animation</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f0f0f0;
      margin: 0;
    }

    .card-container {
      perspective: 1000px;
    }

    .card {
      width: 200px;
      height: 300px;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.6s;
      cursor: pointer;
    }

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

    .card-side {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
    }

    .front {
      background: #fff;
      border: 1px solid #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
    }

    .back {
      background: #ffcc00;
      border: 1px solid #ccc;
      transform: rotateY(180deg);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
    }
  </style>
</head>
<body>

  <div class="card-container">
    <div class="card" id="flipCard">
      <div class="card-side front">
        Front Side
      </div>
      <div class="card-side back">
        Back Side
      </div>
    </div>
  </div>

  <script>
    const card = document.getElementById('flipCard');

    card.addEventListener('click', () => {
      card.classList.toggle('flip');
    });
  </script>

</body>
</html>