Flip

Déjà publié; survol des chatons. 4 images en 450x600px, ratio 4/3.

<div style="width: 1000px; height: 600px; margin: 30px auto; text-align: left;">
<p id="bt1"><img style="box-shadow: 2px 2px 4px black;" src="https://ekladata.com/pourquoipas732.eklablog.com/perso/Galerie/a2/040128_Sweety_Cat.gif" alt="" /></p>
<p id="bt2"><img style="box-shadow: 2px 2px 4px black;" src="https://ekladata.com/pourquoipas732.eklablog.com/perso/Galerie/a2/040205_Kiss.gif" alt="" /></p>
<div id="flip-container">
<div id="flipper">
<div id="front"><img src="https://ekladata.com/pourquoipas732.eklablog.com/perso/Galerie/a2/f1.jpg" alt="" /></div>
<div id="back"><img src="https://ekladata.com/pourquoipas732.eklablog.com/perso/Galerie/a2/f2.jpg" alt="" /></div>
</div>
</div>
<div id="flip-containerb">
<div id="flipperb">
<div id="frontb"><img src="https://ekladata.com/pourquoipas732.eklablog.com/perso/Galerie/a2/f3.jpg" alt="" /></div>
<div id="backb"><img src="https://ekladata.com/pourquoipas732.eklablog.com/perso/Galerie/a2/framb.jpg" alt="" /></div>
</div>
</div>
</div>
<style><!--
#bt1{
position:absolute;
transform:translate(470px,50px);}
#bt2{
position:absolute;
transform:translate(470px,150px);}
#flip-container {width:450px; height:600px; float:left;perspective: 1000;}
#bt1:hover ~ #flip-container #flipper, #bt1.hover ~ #flipper {transform: rotateY(180deg);}
#flip-container, #front, #back {width: 450px; height: 600px;}
#flipper {transition: 1s; transform-style: preserve-3d;position: relative;}
#front, #back {backface-visibility: hidden; position: absolute; top: 0; left: 0;}
#front {z-index: 2; transform: rotateY(0deg);}
#back {transform: rotateY(180deg);}
#flip-containerb {width:450px; height:600px; float:left; perspective: 1000; transform:translate(100px,0px)}
#bt2:hover ~ #flip-containerb #flipperb, #bt2.hover #flipperb {transform: rotateY(180deg);}
#flip-containerb, #frontb, #backb {width: 450px; height: 600px;}
#flipperb {transition: 1s; transform-style: preserve-3d;position: relative;}
#frontb, #backb {backface-visibility: hidden; position: absolute; top: 0; left: 0;}
#frontb {z-index: 2; transform: rotateY(0deg);}
#backb {transform: rotateY(180deg);}
--></style>