Développement

Selon une idée retrouvée chez Melo, sur un de ses articles.

4 images au ratio 16/9 dans un montage de 1012x575px bordure comprise.

SURVOL

 

 

 

 

 

 

 

 

 

 

---

<div style="width: 1000px; height: 563px; margin: 50px auto; text-align: left; border: 6px ridge white; box-shadow: 6px 6px 8px black;">

<p id="sv">SURVOL</p>

<p id="dev1a" class="dev1">&nbsp;</p>

<p id="dev1b" class="dev1">&nbsp;</p>

<p id="dev2a" class="dev2">&nbsp;</p>

<p id="dev2b" class="dev2">&nbsp;</p>

<p id="dev2c" class="dev2">&nbsp;</p>

<p id="dev3a" class="dev3">&nbsp;</p>

<p id="dev3b" class="dev3">&nbsp;</p>

<p id="dev3c" class="dev3">&nbsp;</p>

<p id="dev4a" class="dev4">&nbsp;</p>

<p id="dev4b" class="dev4">&nbsp;</p>

</div>

<style><!--

#sv{position:absolute; z-index:1; width:40px; height:300px; text-align:center; line-height:50px; font-size:40px; transform:translate(475px,130px);}

.dev1{position:absolute; z-index:1;  height:563px; background:url('http://ekladata.com/qoMXiIsQoIn9FEMcUW04JSJEqzs.jpg'); background-size:1000px 563px; margin-top:0px;}

#dev1a{width:160px; background-position:0px 0px; transform:translate(0px,0px);}

#dev1b{width:840px; transform-origin:center left; background-position:-160px 0px; transform:translate(160px,0px) perspective(200px)rotatey(90deg) ;transition:all 1.5s;}

#dev1a:hover ~ #dev1b{z-index:10;transform:translate(160px,0px) perspective(5000px) rotatey(0deg) ;}

.dev2{position:absolute; z-index:1;  height:563px; background:url('http://ekladata.com/IAAT2EkgDNMotPuCmbg47f29vl0.jpg'); background-size:1000px 563px; margin-top:0px;}

#dev2a{width:160px; background-position:-280px 0px; transform:translate(280px,0px);}

#dev2b{width:280px; transform-origin:center right; background-position:0px 0px; transform:translate(0px,0px) perspective(200px)rotatey(-90deg) ;transition:all 1.5s;}

#dev2c{width:560px; transform-origin:center left; background-position:-440px 0px; transform:translate(440px,0px) perspective(200px)rotatey(90deg) ;transition:all 1.5s;}

#dev2a:hover ~ #dev2b{z-index:10; transform:translate(0px,0px) perspective(5000px) rotatey(0deg) ;}

#dev2a:hover ~ #dev2c{z-index:10; transform:translate(440px,0px) perspective(5000px) rotatey(0deg) ;}

.dev3{position:absolute; z-index:1;  height:563px; background:url('http://ekladata.com/yxLxH579y0dt0nVIoJMNlHmqvjw.jpg'); background-size:1000px 563px; margin-top:0px;}

#dev3a{width:160px; background-position:-560px 0px; transform:translate(560px,0px);}

#dev3b{width:560px; transform-origin:center right; background-position:0px 0px; transform:translate(0px,0px) perspective(200px)rotatey(-90deg) ;transition:all 1.5s;}

#dev3c{width:280px; transform-origin:center left; background-position:-720px 0px; transform:translate(720px,0px) perspective(200px)rotatey(90deg) ;transition:all 1.5s;}

#dev3a:hover ~ #dev3b{z-index:10; transform:translate(0px,0px) perspective(5000px) rotatey(0deg) ;}

#dev3a:hover ~ #dev3c{z-index:10; transform:translate(720px,0px) perspective(5000px) rotatey(0deg) ;}

.dev4{position:absolute; z-index:1;  height:563px; background:url('http://ekladata.com/ZAZezU-h9acq_sW1kzl04ZHhJsM.jpg'); background-size:1000px 563px; margin-top:0px;}

#dev4a{width:160px; background-position:160px 0px; transform:translate(840px,0px);}

#dev4b{width:840px; transform-origin:center right; background-position:0px 0px; transform:translate(0px,-15px) perspective(200px)rotatey(-90deg) ;transition:all 1.5s;}

#dev4a:hover ~ #dev4b{z-index:10;transform:translate(0px,0px) perspective(5000px) rotatey(0deg) ;}

--></style>