• Pour loneci

    Voici un montage de Remise en place 4, pour une image de 800x600px. Survolez le montage.

     

     

     

     

     

     

     

     

     


    J'ai un peu modifié l'effet de retournement par rapport à l'original; si vous voulez une rotation "normale", et non seulement dans le sens horizontal, vous remplacez rotatey(xdeg); par rotate(xdeg);
    ...
    <div id="gt">
    <p id="gt0">&nbsp;</p>
    <p id="gt1" class="g">&nbsp;</p>
    <p id="gt2" class="g">&nbsp;</p>
    <p id="gt3" class="g">&nbsp;</p>
    <p id="gt4" class="g">&nbsp;</p>
    <p id="gt5" class="g">&nbsp;</p>
    <p id="gt6" class="g">&nbsp;</p>
    <p id="gt7" class="g">&nbsp;</p>
    <p id="gt8" class="g">&nbsp;</p>
    </div>

    <style><!--
    #gt{position:relative; width:800px; height:600px; background:url(http://ekladata.com/FSy4tDAzom-Ix22uALO9392uS1U/img692.jpg); border:6px ridge grey; margin:10px auto;}
    #gt0{position:absolute; z-index:10; transform:translate(0px,0px); width:800px; height:600px;}
    .g{background:url(http://ekladata.com/nwb7AxS8uBQJK4wLYvR7ROFYeYw/1319.jpg);}
    #gt1{position:absolute; width:150px; height:150px; background-position:0% 0%; transition:all 2s linear; transform:translate(610px,350px) rotatey(180deg);}
    #gt2{position:absolute; width:150px; height:150px; background-position:33% 0%; transition:all 2s linear; transform:translate(420px,350px) rotatey(180deg);}
    #gt3{position:absolute; width:150px; height:150px; background-position:66% 0%; transition:all 2s linear; transform:translate(230px,350px) rotatey(180deg);}
    #gt4{position:absolute; width:150px; height:150px; background-position:100% 0%; transition:all 2s linear; transform:translate(40px,350px) rotatey(180deg);}
    #gt5{position:absolute; width:150px; height:150px; background-position:0% 100%; transition:all 2s linear; transform:translate(610px,100px) rotatey(180deg);}
    #gt6{position:absolute; width:150px; height:150px; background-position:33% 100%; transition:all 2s linear; transform:translate(420px,100px) rotatey(180deg);}
    #gt7{position:absolute; width:150px; height:150px; background-position:66% 100%; transition:all 2s linear; transform:translate(230px,100px) rotatey(180deg);}
    #gt8{position:absolute; width:150px; height:150px; background-position:100% 100%; transition:all 2s linear; transform:translate(40px,100px) rotatey(180deg);}
    #gt0:hover ~ #gt1{transform:translate(0px,0px) rotatey(0deg); width:200px; height:300px;}
    #gt0:hover ~ #gt2{transform:translate(200px,0px) rotatey(0deg); width:200px; height:300px;}
    #gt0:hover ~ #gt3{transform:translate(400px,0px) rotatey(0deg) ; width:200px; height:300px;}
    #gt0:hover ~ #gt4{transform:translate(600px,0px) rotatey(0deg); width:200px; height:300px;}
    #gt0:hover ~ #gt5{transform:translate(0px,300px) rotatey(0deg); width:200px; height:300px;}
    #gt0:hover ~ #gt6{transform:translate(200px,300px) rotatey(0deg); width:200px; height:300px;}
    #gt0:hover ~ #gt7{transform:translate(400px,300px) rotatey(0deg); width:200px; height:300px;}
    #gt0:hover ~ #gt8{transform:translate(600px,300px) rotatey(0deg); width:200px; height:300px;}
    --></style>