• Art.04A.7.21

    Survol de l'image pour afficher une seconde image avec une animation venant de la droite.

     

    ***********************
    <div style="width: 800px; height: 450px; margin: 20px auto; border: 4px ridge white; text-align: left;"><img id="ret0" src="http://ekladata.com/OxUBZ8XG8jsqFCiRdngixlKEkeg@800x450.jpg" alt="" />
    <p id="ret1">&nbsp;</p>
    <img id="ret2" src="http://ekladata.com/0dF9NooDYIJqrZxEvAHL3Cfnwx4@800x450.jpg" alt="" /></div>
    <style><!--
    #ret0{position:absolute; z-index:1; width:800px; height:450px;}
    #ret1{position:absolute; z-index:3; width:800px; height:450px;}
    #ret2{position:absolute; z-index:1; width:800px; height:450px; transform-origin:left center; transform:translate(0px,0px) perspective(200px) rotatey(90deg); transition:all 1s;}
    #ret1:hover ~ #ret2{transform:translate(0px,0px) perspective(2000px) rotatey(0deg);}
    --></style>

    *********************

    Dans ce montage, il faut ajouter un bouton invisible (ret1) et ne pas oublier qu'un élément survolé qui en anime un second (ici, ret2) doit se trouver, dans les lignes de code, avant l'élément animé.

    Si nous voulons inverser le sens de l'animation:

     

    ********************
    <div style="width: 800px; height: 450px; margin: 20px auto; border: 4px ridge white; text-align: left;"><img id="ret4" src="http://ekladata.com/LYty5ejUx_mR1BzZp0HyIo_IxC4@800x450.jpg" alt="" />
    <p id="ret5">&nbsp;</p>
    <img id="ret6" src="http://ekladata.com/C_s-0nTuiDpklSrFT_rhLB_xGRg@800x450.jpg" alt="" /></div>
    <style><!--
    #ret4{position:absolute; z-index:1; width:800px; height:450px;}
    #ret5{position:absolute; z-index:3; width:800px; height:450px;}
    #ret6{position:absolute; z-index:1; width:800px; height:450px; transform-origin:right center; transform:translate(0px,0px) perspective(200px) rotatey(-90deg); transition:all 1s;}
    #ret5:hover ~ #ret6{transform:translate(0px,0px) perspective(2000px) rotatey(0deg);
    --></style>

     

    Si nous voulions une animation verticale, il faudrait modifier rotatey() par rotatex().