4.12.22

Survol avec 2 images au ratio 16/9 en 800x450px, modifiable dans le code.

<div id="flip-container">
<div id="flipper">
<div id="front"><img src="http://ekladata.com/-ShUHO5iW9q04gc-MQgdsmXnoI4@800x450.jpg" alt="" /></div>
<div id="back"><img src="http://ekladata.com/bDew2gnMZVAGPgo9CmLvjwnU4vk@800x450.jpg" alt="" /></div>
</div>
</div>

<style><!--
#flip-container {width:800px; height:450px; margin:30px auto; perspective: 1000;}
#flip-container:hover #flipper, #flip-container.hover #flipper {transform: rotateY(180deg);}
#flip-container, #front, #back {width: 800px; height: 450px;}
#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);}
--></style>