In this post, we'll learn about how to create a stylish 3D flip card animation using HTML and CSS with gradient backgrounds.

Visit my website

Understanding the Structure

We’ll be using two sides for the card—front and back—to create a flipping effect. This effect will be activated on hover, using CSS transitions.

    

      
Front Side
    
    

      
Back Side
    

This simple HTML structure contains a div element with two sides: one for the front and one for the back.

.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(43deg, #4158D0 0%, #C850C0 46%,#FFCC70 100%);
}

.card-side.front {
    background-color: #0093E9;
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}

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

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

Live Demo

backface-visibility: Hides the content on the back of the card when the front is visible, and vice versa.

set rotateY() for the back side of the card to -180deg and the front side to 0deg.

perspective: Adds depth to the 3D effect by allowing the card to appear as though it's flipping in space.

Upon hover, set rotateY() for the front side to 180deg and backside to 0deg.

Conclusion

With just a few lines of HTML and CSS, you can create a stunning 3D flip card animation that adds a dynamic touch to your website. Try experimenting with colors and effects to make it uniquely yours