HTML

<div id="containerEx9">
<div class="ex9"><img src="http://gif" alt="" width="190" height="220" /> <img src="http://.gif" alt="" width="190" height="220" /></div>
</div>

CSS

<style type="text/css"><!--
#containerEx9 {width: 800px;
margin: 0 auto;
}
.ex9 img {
margin: 20px;
border: 1px dotted #fff; 
border-radius: 1em/0.5em;
-webkit-box-shadow: 2px 2px 3px 3px rgba(0,0,0,0.2); 
-moz-box-shadow: 2px 2px 3px 3px rgba(0,0,0,0.2); 
 box-shadow:2px 2px 3px 3px rgba(0,0,0,0.2); 
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
}
.ex9 img:hover {
 opacity: 0; -webkit-transform: perspective(200px) rotateX(-90deg); }
 100% { opacity: 1; -webkit-transform: perspective(200px) rotateX(0deg); }
}
 0% { opacity: 0; -moz-transform: perspective(200px) rotateX(-90deg); }
 100% { opacity: 1; -moz-transform: perspective(200px) rotateX(0deg); }
}
 0% { opacity: 0; -o-transform: perspective(200px) rotateX(-90deg); }
 100% { opacity: 1; -o-transform: perspective(200px) rotateX(0deg); }
}
 0% { opacity: 0; transform: perspective(200px) rotateX(-90deg); }
 100% { opacity: 1; transform: perspective(200px) rotateX(0deg); }
}
--></style>