• Flip 2

    Survolez les montages.

    Le principe est de placer 2 images de même taille, l'une au dessus de l'autre et de les faire tourner, dans un sens ou un autre, au survol du montage.
    On peut ajouter ou non un effet perspective par perspective(500px): moins le chiffre est élevé et plus l'effet est important.

     
     
     
    Code.
    <div id="f1a">
    <div id="f2a">&nbsp;</div>
    <div id="f3a">&nbsp;</div>
    <div id="f4a">&nbsp;</div>
    </div>

    <style><!--
    #f1a{position:relative; width:338px; height:600px; float:left; margin:10px 30px 40px 10px;}
    #f2a{position:absolute; z-index:10; width:338px; height:600px; transform:translate(0px,0px);}
    #f3a{position:absolute; z-index:1; width:338px; height:600px; border:4px ridge grey; border-radius:50%; box-shadow:3px 3px 8px black; background:url(http://ekladata.com/W18Tqo-5uT8-TIQiRzjmb_9ZnqM.jpg); transform:translate(0px,0px) rotatey(0deg) perspective(700px); transition:all 1s linear;}
    #f4a{position:absolute; z-index:2; width:338px; height:600px; border:4px ridge grey; border-radius:50%; box-shadow:3px 3px 8px black; background:url(http://ekladata.com/i3pGRMPOsghuvVeAwCym3258WGE.jpg); transform:translate(0px,0px) rotatey(-180deg) perspective(700px); transition:all 1s linear;}
    #f2a:hover ~ #f3a{z-index:5; transform:translate(0px,0px) rotatey(180deg);}
    #f2a:hover ~ #f4a{transform:translate(0px,0px) rotatey(0deg);}
    --></style>

     
     
     
    Code.
    <div id="f1b">
    <div id="f2b">&nbsp;</div>
    <div id="f3b">&nbsp;</div>
    <div id="f4b">&nbsp;</div>
    </div>


    <style><!--
    #f1b{position:relative; width:338px; height:600px; float:left; margin:5px 10px 40px 10px;}
    #f2b{position:absolute; z-index:10; width:338px; height:600px; transform:translate(0px,0px);}
    #f3b{position:absolute; z-index:1; width:338px; height:600px; border:4px ridge grey; border-radius:50%; box-shadow:3px 3px 8px black; background:url(http://ekladata.com/W18Tqo-5uT8-TIQiRzjmb_9ZnqM.jpg); transform:translate(0px,0px) rotatex(-180deg) perspective(700px); transition:all 1s linear;}
    #f4b{position:absolute; z-index:2; width:338px; height:600px; border:4px ridge grey; border-radius:50%; box-shadow:3px 3px 8px black; background:url(http://ekladata.com/i3pGRMPOsghuvVeAwCym3258WGE.jpg); transform:translate(0px,0px) rotatex(0deg) perspective(700px); transition:all 1s linear;}
    #f2b:hover ~ #f3b{z-index:5; transform:translate(0px,0px) rotatex(0deg);}
    #f2b:hover ~ #f4b{transform:translate(0px,0px) rotatex(-180deg);}
    --></style>

    Effet de perspective; modifiez la valeur 500px pour choisir votre animation

     
     
     
    Code.
    <div id="f1d">
    <div id="f2d">&nbsp;</div>
    <div id="f3d">&nbsp;</div>
    <div id="f4d">&nbsp;</div>
    </div>
    <style><!--
    #f1d{position:relative; width:600px; height:338px; float:left; margin:10px 30px 40px 10px;}
    #f2d{position:absolute; z-index:10; width:600px; height:338px; transform:translate(0px,0px);}
    #f3d{position:absolute; z-index:1; width:600px; height:338px; border:4px ridge grey; box-shadow:3px 3px 8px black; background:url(http://ekladata.com/vbKItRStW_vAVBZdcurSbBAmSjg.jpg); background-size:cover;  transform:translate(0px,0px) rotatey(0deg) perspective(700px); transition:all 1s linear;}
    #f4d{position:absolute; z-index:2; width:600px; height:338px; border:4px ridge grey; box-shadow:3px 3px 8px black; background:url(http://ekladata.com/CAGbWxbWjKa3kQgR5X7zZhg9gmA.jpg); background-size:cover; transform:translate(0px,0px) rotatey(-180deg) perspective(700px); transition:all 1s linear;}
    #f2d:hover ~ #f3d{z-index:5; transform:translate(0px,0px) rotatey(-180deg);}
    #f2d:hover ~ #f4d{transform:translate(0px,0px) rotatey(0deg);}
    --></style>

    Et un dernier en 1150x647px; plus les images sont larges et plus l'animation perspective occupe de l'espace: ici:2500px.