• Flip Ovale multiple

    Montage en 60vw/33.75vw soit 60% de la largeur de l'écran de lecture.
    8 images en 1536x864px mais ces dimensions sont pour ne pas avoir un transfert trop lourd; vous pouvez placer vos adresses d'images à la place des miennes, quelles que soient leurs dimensions.

    Clic sur les lettres pour changer
    les images puis survol des
    images pour les
    retourner.

     

     

     


    <div style="width: 60vw; height: 33.75vw; margin: 2vh auto;"><input id="bta" type="text" value="A" /><input id="btb" type="text" value="B" /><input id="btc" type="text" value="C" />
    <p id="cc">Clic sur les lettres pour changer<br />les images puis survol des<br />images pour les<br /> retourner.</p>
    <p id="bt1">&nbsp;</p>
    <p id="f1">&nbsp;</p>
    <p id="f2">&nbsp;</p>
    </div>

    <style><!--
    #bta{position:absolute; z-index:5; width:2vw; height:2vw; border-radius:50%; text-align:center; font-size:2vw; color:coral!important; text-shadow:0.1vh 0.1vh black; transform:translate(52vw,0vw);}
    #btb{position:absolute; z-index:5; width:2vw; height:2vw; border-radius:50%; text-align:center; font-size:2vw; color:coral!important; text-shadow:0.1vh 0.1vh black; transform:translate(55vw,2vw);}
    #btc{position:absolute; z-index:5; width:2vw; height:2vw; border-radius:50%; text-align:center; font-size:2vw; color:coral!important; text-shadow:0.1vh 0.1vh black; transform:translate(58vw,4vw);}
    #cc{position:absolute; z-index:1; width:20vw; font-size:1vw; transform:translate(0vw,0vw);}
    #bt1{position:absolute; z-index:5; width:60vw; height:33.75vw; border-radius:50%; transform:translate(0vw,0vw);}
    #f1{position:absolute; z-index:1; transition:all 1s linear 0s; transform:translate(0px,0px) rotatey(0deg); width:60vw; height:33.75vw; border-radius:50%; box-shadow:inset 0.5vh 0.5vh 1vw black, inset -0.5vh -0.5vh 1vw white; background:url('http://ekladata.com/DOHWE3NdqiOmasCmYdnz_Av6gaU.jpg'); background-size:cover; backface-visibility: hidden;}
    #f2{position:absolute; z-index:1; transition:all 1s linear 0s; transform:translate(0px,0px) rotatey(-180deg);width:60vw; height:33.75vw; border-radius:50%; box-shadow:inset 0.5vh 0.5vh 1vw black, inset -0.5vh -0.5vh 1vw white; background:url('http://ekladata.com/eM86DtUboDd6njZAVE3VC0rgwv0.jpg'); background-size:cover; backface-visibility: hidden;}
    #bt1:hover ~ #f1{transform:translate(0px,0px) rotatey(180deg);}
    #bt1:hover ~ #f2{transform:translate(0px,0px) rotatey(0deg);}
    #bta:focus ~ #f1{background:url('http://ekladata.com/aQEbEPepeBlnTRcFBz-EE1LYDGw.jpg');}
    #bta:focus ~ #f2{background:url('http://ekladata.com/him3cibGaA2Lt-tTdq8M16LhX0U.jpg');}
    #btb:focus ~ #f1{background:url('http://ekladata.com/tGyxoynbB3KDLqgigkvhacnrFIw.jpg');}
    #btb:focus ~ #f2{background:url('http://ekladata.com/d5dYBk3Nrsn7jSy7hIAT76ImjZQ.jpg');}
    #btc:focus ~ #f1{background:url('http://ekladata.com/jLEOpf-R8IKnmaitlWLUNr3PXEA.jpg');}
    #btc:focus ~ #f2{background:url('http://ekladata.com/2X1sZs0JKV_U0_frur0uK-bmQOw.jpg');}
    --></style>

    ...