HTML
<div class="card_div">
<div class="card">
<div class="front">
<p>앞면</p>
</div>
<div class="back">
<p>뒷면</p>
</div>
</div>
</div>
CSS
.card_div:hover .card, .card_div.hover .card {
transform: rotateY(180deg);
}
.card {
transition: .6s;
transform-style: preserve-3d;
transform-origin: 100% 50% 0;
position: relative;
}
.front, .back {
backface-visibility: hidden;
bottom: 0;
left: 0;
width: 100%;
}
.front {
z-index: 2;
transform: rotateY(0deg);
}
.back {
transform: rotateX(-180deg);
position: absolute;
}
.card_div:hover .card {
transform: rotateX(180deg);
}