• 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;