Código HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.card {
position:relative;
width:15rem;height:20rem;
perspective:30rem;
}
.card>* {
position:absolute;
width:inherit;height:inherit;
transition:transform 1s;
backface-visibility:hidden;
perspective:inherit;
transform-style:preserve-3d;
}
.card>*>*{transform:translateZ(2em);}
.card>*{display:flex;justify-content:center;align-items:center;}
.card>:first-child{background-color:#66ccff;}
.card>:last-child{background-color:#dd8800;}
.card>:last-child{transform:rotateY(180deg);}
.card:hover>:first-child{transform:rotateY(180deg);}
.card:hover>:last-child{transform:rotateY(360deg);}
.card>:first-child{transform:rotateY(0deg);}
</style>
</head>
<body>
<div class="card">
<div><span>Front</span></div>
<div><span>Back</span></div>
</div>
</body>
</html>