15.01.2024B

Variante du précédent, au clic,(focus) pour ceux qui préfèrent.

<div style="width: 800px; height: 600px; margin: 30px auto; border: 4px solid white; box-shadow: 4px 4px 8px black;"><input id="bt1" class="bout" type="text" value="A" /> <input id="bt2" class="bout" type="text" value="B" /> <input id="bt3" class="bout" type="text" value="C" /> <input id="bt4" class="bout" type="text" value="D" /> <input id="bt5" class="bout" type="text" value="E" /> <input id="bt6" class="bout" type="text" value="F" /> <input id="bt7" class="bout" type="text" value="G" /> <input id="bt8" class="bout" type="text" value="H" />
<p id="f1" class="flp">&nbsp;</p>
<p id="f2" class="flp">&nbsp;</p>
<p id="f3" class="flp">&nbsp;</p>
<p id="f4" class="flp">&nbsp;</p>
<p id="f5" class="flp">&nbsp;</p>
<p id="f6" class="flp">&nbsp;</p>
<p id="f7" class="flp">&nbsp;</p>
<p id="f8" class="flp">&nbsp;</p>
<p id="f9" class="flp">&nbsp;</p>
</div>
<style><!--
.bout{position:absolute; z-index:5; width:30px; font-size:20px; text-align:center; color:black; text-shadow:1px 1px black;background:rgba(255,255,255,0.5);}
#bt1{ transform:translate(360px,50px);}
#bt2{transform:translate(360px,100px);}
#bt3{transform:translate(360px,150px);}
#bt4{ transform:translate(360px,200px);}
#bt5{transform:translate(360px,250px);}
#bt6{transform:translate(360px,300px);}
#bt7{transform:translate(360px,350px);}
#bt8{transform:translate(360px,400px);}
.flp{position:absolute; z-index:1; transition:all 1s linear 0s; width:800px; height:600px; backface-visibility: hidden;}
#f1{transform:translate(0px,0px) rotatey(0deg); background:url('http://ekladata.com/oor46_yjj6r8molc2-oHq1Q9cfo.jpg'); background-size:800px 600px;}
#f2{transform:translate(0px,0px) rotatey(-180deg); background:url('http://ekladata.com/sLo_ndZ6QeX4MZEiwjk5PD7BeQ4.jpg'); background-size:800px 600px;}
#f3{transform:translate(0px,0px) rotatey(-180deg); background:url('http://ekladata.com/hSFtP6I2EHq9FooOZXgqnzc1-lU.jpg'); background-size:800px 600px;}
#f4{transform:translate(0px,0px) rotatey(-180deg); background:url('http://ekladata.com/_jqHdlpoRwhTYpIhLqdttJfAC4o.jpg'); background-size:800px 600px;}
#f5{transform:translate(0px,0px) rotatey(-180deg); background:url('http://ekladata.com/iVMYjKOoR-UddkzFirGpZV9pksk.jpg'); background-size:800px 600px;}
#f6{transform:translate(0px,0px) rotatey(-180deg); background:url('http://ekladata.com/TR666LDvK_sPBOYzUE3LgR2iF0s.jpg'); background-size:800px 600px;}
#f7{transform:translate(0px,0px) rotatey(-180deg); background:url('http://ekladata.com/r0mosrTMzwqmmH1cAWifevggrNQ.jpg'); background-size:800px 600px;}
#f8{transform:translate(0px,0px) rotatey(-180deg); background:url('http://ekladata.com/EgPG03t206UexXiWfl4kGS-f3V0.jpg'); background-size:800px 600px;}
#f9{transform:translate(0px,0px) rotatey(-180deg); background:url('http://ekladata.com/V5fAwcrSn6187ERLjwg8_o5tBUA.jpg'); background-size:800px 600px;}

#bt1:focus ~ #f1, #bt2:focus ~ #f1, #bt3:focus ~ #f1,#bt4:focus ~ #f1, #bt5:focus ~ #f1, #bt6:focus ~ #f1, #bt7:focus ~ #, #bt8:focus ~ #f1{transform:translate(0px,0px) rotatey(180deg);}
#bt1:focus ~ #f2,#bt2:focus ~ #f3,#bt3:focus ~ #f4,#bt4:focus ~ #f5,#bt5:focus ~ #f6,#bt6:focus ~ #f7,#bt7:focus ~ #f8,#bt8:focus ~ #f9{transform:translate(0vw,0vh) rotatey(0deg);}
--></style>