-
Flip vertical
HTML
<div id="containerEx13">
<div class="ex13"><img src="https://lh5.googleusercontent.com/-gSzVgCspMp4/U1Khbe42d0I/AAAAAAAAQqU/GDjvG86YJJY/w375-h500-no/2.gif" alt="" width="140" height="160" /> <img src="http://img0.liveinternet.ru/images/attach/c/2//67/366/67366509_3620e03de9b4.gif" alt="" width="140" height="160" /> </div>
</div>CSS
<style type="text/css"><!--
/*GloriaV */
/*URL: http://tutorialgloriav.eklablog.com/*/
#containerEx13 {width: 800px;
margin: 0 auto;
}
.ex13 img {
margin: 20px;
border: 2px dotted #fff;
border-radius: 11% 3%;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px 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;
}
.ex13 img:hover {
opacity: 0; -webkit-transform: perspective(200px) rotateY(80deg); }
40% { -webkit-transform: perspective(200px) rotateY(-20deg); }
70% { -webkit-transform: perspective(200px) rotateY(10deg); }
90% { -webkit-transform: perspective(200px) rotateY(-5deg); }
100% { opacity: 1; -webkit-transform: perspective(200px) rotateY(0deg); }
opacity: 0; -moz-transform: perspective(200px) rotateY(80deg); }
40% { -moz-transform: perspective(200px) rotateY(-20deg); }
70% { -moz-transform: perspective(200px) rotateY(10deg); }
90% { -moz-transform: perspective(200px) rotateY(-5deg); }
100% { opacity: 1; -moz-transform: perspective(200px) rotateY(0deg); }
}
opacity: 0; -o-transform: perspective(200px) rotateY(80deg); }
40% { -o-transform: perspective(200px) rotateY(-20deg); }
70% { -o-transform: perspective(200px) rotateY(10deg); }
90% { -o-transform: perspective(200px) rotateY(-5deg); }
100% { opacity: 1; -o-transform: perspective(200px) rotateY(0deg); }
}
opacity: 0; -webkit-transform: perspective(200px) rotateY(80deg); }
40% { -webkit-transform: perspective(200px) rotateY(-20deg); }
70% { -webkit-transform: perspective(200px) rotateY(10deg); }
90% { -webkit-transform: perspective(200px) rotateY(-5deg); }
100% { opacity: 1; -webkit-transform: perspective(200px) rotateY(0deg); }
--></style>
-
Commentaires
Aucun commentaire pour le moment
Ajouter un commentaire