Create a card flip animation using only HTML and CSS for a cool visual effect.

Hey, I am Ajink, and today in this blog, we’re going to create a card flip animation using only HTML and CSS. A card flip animation adds a cool visual effect to your webpage, providing an engaging user experience.

HTML Code: create index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Card Flip Animation</title>
</head>
<body>
  <div class="card-container">
    <div class="card">
      <div class="card-face card-front">
        <h2>Front Content</h2>
      </div>
      <div class="card-face card-back">
        <p>Back Content</p>
      </div>
    </div>
  </div>
</body>
</html>

HTML Code Explanation:

  • We have a basic HTML structure with a container div and a card div containing two faces: front and back.

CSS Code: create style.css

body {
  margin: 0;
  font-family: 'Arial', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.card-container {
  perspective: 1000px;
}

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

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

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

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

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

CSS Code Explanation:

  • The CSS provides styling for the card flip animation, including colors, shadows, and transforms.
  • The perspective property adds a depth effect, and rotateY is used to create the flip animation.
  • The backface-visibility: hidden property ensures that the back face is not visible during the flip.

Conclusion:

In this blog, we successfully implemented a card flip animation using only HTML and CSS. Card flip animations are an excellent way to add a visually appealing effect to your website. Don’t forget to subscribe to my YouTube channel at youtube.com/@ajink21 for more exciting tutorials.

Thanks for reading, and if you have any doubts, feel free to comment!

Ajink Gupta
Ajink Gupta

Ajink Gupta is a software developer from Dombivli, Maharashtra, India. He has expertise in a variety of technologies including web development, mobile app development, and blockchain. He works with languages and frameworks like JavaScript, Python, Flutter, React, and Django.

Ajink Gupta is also active on several platforms where he shares his work and engages with the community. You can find his projects and contributions on GitHub and follow his tutorials and updates on his YouTube channel​ . He also has a personal website where he showcases his portfolio and ongoing projects at ajinkgupta.vercel.app

Articles: 59