3D animations add to pleasant interactions on your website when done right. Flippable cards can help you showcase your product/service playfully well.

And we'll see it's a no-brainer when done with CSS.

If you are here for the code -> 3D flippable card

Our HTML should contain both the front and back sides of the card into a single article like below

<article class="card">
 <!-- FRONT SIDE OF THE CARD -->

  <div class="card__side  card__front">
    okay
   </div

  <!-- BACK SIDE OF THE CARD -->

  <div class="card__side card__back">
    okay
  </div>
</article>

The important styling rule here is

.card{
 position:relative;
    &__side{
        position:absolute;
        top:0;
        left:0;
        backface-visibility:hidden; //to hide back view of the card
    }
}

When we hover the card, the front side moves behind and the back side moves forward.

.card{
  &__back{
      transform:rotateY(180deg); //stays behind
  }
  &:hover &__front{
    transform:rotateY(-180deg); // leaves the screen from left
  }

  &:hover &__back{
    transform:rotateY(0deg); //enters the screen from right
  }
 }

This puts in place our basic flippable card. To add 3D effect to it, we can use the Perspective property

The perspective property defines how far the object is away from the user. So, a lower value will result in a more intensive 3D effect than a higher value.

.card{
perspective:115rem;
}

This completes our 3D flippable card! Here you go!