~~~
<style>
.parent{
border:1px solid #333;
width:200px;
height:300px;
padding:10px;
}
.parent>div{
width:200px;
height:300px;
background-size: cover;
backface-visibility: hidden;
position:absolute;
transition: all 3s;
}
.front{
z-index: 100;
background:url("images/01.png");
}
.back{
background:url("images/02.png");
transform: rotateY(-180deg)
}
.parent:hover .front{
transform: rotateY(180deg);
}
.parent:hover .back{
transform: rotateY(0deg);
}
</style>
</head>
<body>
<div class="parent">
<div class="front">
</div>
<div class="back">
</div>
</div>
</body>
~~~
