how to make 3d flip card in css

Question

how to make 3d flip card in pure css

Answer 1

First, let's say we have this html code :

<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2>Front Side</h2>
</div>
<div class="flip-box-back">
<h2>Back Side</h2>
</div>
</div>
</div>

Set css : first set div class name flip-box, but perspective makes object more the 3d effect.

.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}

Now set class flip-box-inner, in which main is transition and transform.
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}

On hover effect rotate it in Y-axes.

.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

On hover out set to front page.

.flip-box-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}

I hope this will help you.

Thanks!!!