Montage 274a

Variante du code précédent; 6 images au ratio 16/9; animation au clic. 

<div style="width: 900px; height: 506px; border: 4px solid grey; perspective: 1000; margin: 5px auto; text-align: left;"><input id="bt1" class="bt" type="text" value="A" /> <input id="bt2" class="bt" type="text" value="B" /> <input id="bt3" class="bt" type="text" value="C" /> <input id="bt4" class="bt" type="text" value="D" /> <input id="bt5" class="bt" type="text" value="E" />
<img id="f1" class="flp" src="http://ekladata.com/Ri2UmtGmULx5z_cK-wF3Nkw7AJ0.jpg" alt="" />
<img id="f2" class="flp" src="http://ekladata.com/mGBRVd-lU28NPt6WT2OMBywlDM4.jpg" alt="" />
<img id="f3" class="flp" src="http://ekladata.com/afBIr75lELaU2LmFc_afWWQ2gKg.jpg" alt="" />
<img id="f4" class="flp" src="http://ekladata.com/elkRCTfk0uhmXzrzw5IXrTqb3yE.jpg" alt="" />
<img id="f5" class="flp" src="http://ekladata.com/xcVacFbWWSdjldmTa-gKeDViZYc.jpg" alt="" />
<img id="f6" class="flp" src="http://ekladata.com/8adPC6D0QpxUVgHsjy0XCMKkgUY.jpg" alt="" />
</div>

<style><!--
.bt{position:absolute; z-index:5; width:25px; background:transparent; border:none; font-size:30px; text-align:center; color:white!important; text-shadow:2px 2px black;}
#bt1{transform:translate(865px,10px);}
#bt2{transform:translate(865px,60px);}
#bt3{transform:translate(865px,110px);}
#bt4{transform:translate(865px,160px);}
#bt5{transform:translate(865px,210px);}
.flp{position:absolute; z-index:1; transition:all 1s linear 0s; width:900px; height:506px; backface-visibility: hidden;}
#f1{transform:translate(0px,0px) rotate3d(1, 1, 0, 0deg);}
#f2,#f3,#f4,#f5,#f6{transform:translate(0px,0px) rotate3d(1, 1, 0, -180deg);}
#bt1:focus ~ #f1, #bt2:focus ~ #f1, #bt3:focus ~ #f1, #bt4:focus ~ #f1, #bt5:focus ~ #f1{transform:translate(0px,0px) rotate3d(1, 1, 0, -180deg);}
#bt1:focus ~ #f2,#bt2:focus ~ #f3,#bt3:focus ~ #f4,#bt4:focus ~ #f5,#bt5:focus ~ #f6{transform:translate(0px,0px) rotate3d(1, 1, 0, 0deg);}
--></style>