-
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"> </p>
<p id="gt1" class="g"> </p>
<p id="gt2" class="g"> </p>
<p id="gt3" class="g"> </p>
<p id="gt4" class="g"> </p>
<p id="gt5" class="g"> </p>
<p id="gt6" class="g"> </p>
<p id="gt7" class="g"> </p>
<p id="gt8" class="g"> </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>