-
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"> </p>
<p id="f1"> </p>
<p id="f2"> </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>...