Предлагаю посмотреть такой вариант:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
margin: 0;
background: #B3E5D4;
}
div#d1 {position:absolute;
top:10px;
left:10px;
}
div#d2 {position:absolute;
top:10px;
left:110px;
}
div#d3 {position:absolute;
top:10px;
left:210px;
}
div {
width: 100px;
height: 200px;
}
img {
position: absolute;
width:100%; }
div:hover .front {
transform: rotateY(180deg);
transition: all 1s ease;
}
div:hover .back {
transform: rotateY(180deg);
transition: all 1s ease;
}
.front {
z-index: 2;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.back {
z-index: 0;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
</style>
</head>
<body>
<div id="d1">
<img src="http://javascript.ru/cat/list/js.gif" class="front">
<img src="http://javascript.ru/cat/list/donkey.gif" class="back">
</div>
<div id="d2">
<img src="http://javascript.ru/cat/list/js.gif" class="front">
<img src="http://javascript.ru/cat/list/donkey.gif" class="back">
</div>
<div id="d3">
<img src="http://javascript.ru/cat/list/js.gif" class="front">
<img src="http://javascript.ru/cat/list/donkey.gif" class="back">
</div>
</body>
</html>
Жалко, что hover есть, а hout нет
Попробую еще покрутить с mouseout