<!DOCTYPE html>
<html>
<head>
<style>
.block, .front, .back {
width: 150px;
height: 150px;
}
.block{
box-shadow: 0 0 5px rgba(0, 0, 0, .4);
margin: 15px;
}
.front{
background: green;
transition: all .7s;
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.back{
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
background: red;
transition: all .7s;
opacity: 0;
}
.block > div:hover .front{
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.block > div:hover .back{
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
opacity: 1;
}
</style>
</head>
<body>
<div class="block">
<div>
<div class="front">front</div>
<div class="back">back</div>
</div>
</div>
</body>
</html>