• Montage 274b

    Variante 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/VjI2u57fJ8HoNZbG17WtqCu_uTw.jpg" alt="" /> <img id="f2" class="flp" src="http://ekladata.com/IuVxBwCp8NBrbihbaPOuc155lj4.jpg" alt="" /> <img id="f3" class="flp" src="http://ekladata.com/xWttrSwOThLJyKQAhO1XV-NF94k.jpg" alt="" /> <img id="f4" class="flp" src="http://ekladata.com/5O3n0oBIir8ASAA-af_hQgz9TD4.jpg" alt="" /> <img id="f5" class="flp" src="http://ekladata.com/qeXXjy_zpQwtNSabFeheLRqNU6Y.jpg" alt="" /> <img id="f6" class="flp" src="http://ekladata.com/RRmmhX3z3KcZhOX-w_GNj_fGg4g.jpg" alt="" /></div>
    <style><!--
    .bt{position:absolute; z-index:5; width:30px; text-align:center; border:none; background:transparent; font-size:30px; color:white!important; text-shadow:2px 2px black;}
    #bt1{transform:translate(865px,10px);}
    #bt2{transform:translate(865px,70px);}
    #bt3{transform:translate(865px,130px);}
    #bt4{transform:translate(865px,190px);}
    #bt5{transform:translate(865px,250px);}
    .flp{position:absolute; z-index:1; transition:all 1s linear 0s; width:900px; height:506px; backface-visibility: hidden;}
    #f1{transform:translate(0px,0px) rotatey(0deg);}
    #f2,#f3,#f4,#f5,#f6{transform:translate(0px,0px) rotatey(-180deg);}
    #bt1:focus ~ #f1, #bt2:focus ~ #f1, #bt3:focus ~ #f1, #bt4:focus ~ #f1, #bt5:focus ~ #f1{transform:translate(0px,0px) rotatey(180deg);}
    #bt1:focus ~ #f2,#bt2:focus ~ #f3,#bt3:focus ~ #f4,#bt4:focus ~ #f5,#bt5:focus ~ #f6{transform:translate(0px,0px) rotatey(0deg);}
    --></style>