How Do You Flip a Card on Hover in CSS?

In this tutorial we will create 3d flip card effect on hover using only Html and CSS.

Here are our initial HTML and CSS code.

HTML

<div class="card">
  <div class="front-card side">FRONT</div>
  <div class="back-card side">BACK</div>
</div>

CSS

html{
    box-sizing: border-box;
}
*,
*::before,
*::after{
    box-sizing: inherit;
}

body{
    margin: 0;
    padding: 0;
}
.card{
    width: 250px;
    height: 250px;
    margin: 50px auto;
}
.side{
    width: 100%;
    height: 100%;
    padding-top: 100px;
    border-radius: 15px;
    font-size: 26px;
    text-align: center;
    color: #fff;
}
.front-card{
    background-color: #9EA8DC; 
}
.back-card{
    background-color: #F9C555;
}

We need to add perspective property in containing (parent) element to get 3D effect.

.card{
    width: 250px;
    height: 250px;
    margin: 50px auto;
    position: relative;
} 

Now we will stack two sides on top of each other.

We will give position: absolute to .side and position: relative to parent element.

This will position front and back side in relation to its parent element.

.card{
    width: 250px;
    height: 250px;
    margin: 50px auto;
    position: relative;
    perspective: 1100px;
} 

.side{
    width: 100%;
    height: 100%;
    padding-top: 100px;
    border-radius: 15px;
    font-size: 26px;
    text-align: center;
    color: #fff;
    position: absolute;
}
.front-card{
    background-color: #9EA8DC; 
}
.back-card{
    background-color: #F9C555;
    top: 0;
    left: 0;
}

You can see that front side is not visible because back side is stack on top of front side.

This is due to position: absolute property.

To make front side visible add z-index property to .back-card class.

Related article What Is Positioning Elements In CSS?

.back-card{
    background-color: #F9C555;
    top: 0;
    left: 0;
    z-index: -1;
}

Now let’s rotate the card.

.side{
    width: 100%;
    height: 100%;
    padding-top: 100px;
    border-radius: 15px;
    font-size: 26px;
    text-align: center;
    color: #fff;
    position: absolute;
    backface-visibility: hidden; /* hides backside of the card when it is rotated */
    transition: transform .5s ease-in-out; 
}
.front-card{
    background-color: #9EA8DC; 
    transform: rotateY(0deg);
}
.back-card{
    background-color: #F9C555;
    top: 0;
    left: 0;
    z-index: -1;
    transform: rotateY(180deg);
}

You can see that we have given 3D transform rotateY property to both front side and back side.

Now we need to add corresponding rotateY property when we hover over the card.

This will flip the card horizontally.

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

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

Complete CSS Code

html{
    box-sizing: border-box;
}
*,
*::before,
*::after{
    box-sizing: inherit;
}

body{
    margin: 0;
    padding: 0;
}

.card{
    width: 250px;
    height: 250px;
    margin: 50px auto;
    position: relative;
    perspective: 1100px;
} 

.side{
    width: 100%;
    height: 100%;
    padding-top: 100px;
    border-radius: 15px;
    font-size: 26px;
    text-align: center;
    color: #fff;
    position: absolute;
    backface-visibility: hidden;
    transition: transform .5s ease-in-out; 
}
.front-card{
    background-color: #9EA8DC; 
    transform: rotateY(0deg);
}
.back-card{
    background-color: #F9C555;
    top: 0;
    left: 0;
    z-index: -1;
    transform: rotateY(180deg);
}

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

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