Flipping Card in CSS

Hello Folks 👋

What's up friends, this is SnowBit here. I am a young passionate and self-taught frontend web developer and have an intention to become a successful developer.

Today, I am here with a cool CSS tutorial and you'll love it. Let's get started 🚀

---

• Create a card

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

• It's time to style them

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,700;1,400&display=swap');
body{
  font-family: "Poppins", sans-serif;
}
.card {
  perspective: 150rem;
  position: relative;
  height: 40rem;
  max-width: 400px;
  margin: 2rem;
  box-shadow: none;
  background: none;
}

.card-side {
  height: 35rem;
  border-radius: 15px;
  transition: all 0.8s ease;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  padding:2rem;
  color: white
}

.card-side.back {
  transform: rotateY(-180deg);
  background-color: #4158D0;
  background-image: linear-gradient(to right, rgb(236, 72, 153), rgb(239, 68, 68), rgb(234, 179, 8))
}

.card-side.front {
  background-color: #0093E9;
  background-image: linear-gradient(to right, rgb(134, 239, 172), rgb(59, 130, 246), rgb(147, 51, 234))
}

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

.card:hover .card-side.back {
  transform: rotateY(0deg);
}

---

You made it 🌟

Check out the pen - https://codepen.io/codewithsnowbit/pen/BamqBLL

So, this was it for this article. I hope you learnt something new and enjoy reading. Stay tuned for the next article.

Let's connect on Twitter - @codewithsnowbit

🌏 Let's connect

• GitHub
• Twitter
• YouTube