Flip vertical

Juste une reprise d'un code déjà publié; en partant d'un code trouvé sur le net, j'ai essayé de le simplifier.

Survolez le montage.

<div style="width: 23vw; height: 40vw; margin: 0.2vw auto;">
<p id="bt">&nbsp;</p>
<p id="av">&nbsp;</p>
<p id="ar">&nbsp;</p>
</div>
<style><!--
#bt{position:absolute; z-index:5; width:23vw; height:40vw;}
#av{position:absolute; z-index:2; width:23vw; height:40vw; background:url('http://ekladata.com/_wfSNEVW5vgTX4V-i-ZFfw6WMg4.jpg'); background-size:23vw 40vw; backface-visibility: hidden; transform: rotateY(0deg); transform-style: preserve-3d; transition: 1.5s;}
#ar{position:absolute; z-index:1; width:23vw; height:40vw; background:url('http://ekladata.com/i-UheyPhb1gkV-jMwXBDvPUa9Kg.jpg'); background-size:23vw 40vw; backface-visibility: hidden; transform: rotateY(180deg); transform-style: preserve-3d; transition: 1.5s;}
#bt:hover ~ #av{transform: rotateY(180deg);}
#bt:hover ~ #ar{transform: rotateY(0deg);}
--></style>

La taille du montage et des images est au ratio 16/9 soit, en vertical, largeur 23vw et hauteur 40vw. (unités adaptatives)

Le paragraphe bouton (bt) est placé avant les éléments qu'il commande: règle impérative !

Les paragraphes av et ar tournent de 180 degrés en étant cachés au retournement: backface-visibility:hidden;