Flipping Card in CSS

Flipping Card in CSS

ยท

1 min read

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 - 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

ย