•  

    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

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :