Rot+pers+vert

Même montage en vertical, pour 4 images en 800x450px, ratio 4/3

Survol

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

<div style="position: relative; margin: 30px auto; width: 800px; height: 450px; text-align: left;">
<p id="expa">Survol</p>
<img id="soir5a" class="soire" src="http://ekladata.com/WyoFF5V1LMvN54oBm2g8GzlpL9U.jpg" alt="" /> <img id="soir6a" class="soire" src="http://ekladata.com/RBc_RfQkuwzh83sx0jWncluzfsk.jpg" alt="" /> <img id="soir7a" class="soire" src="http://ekladata.com/Lt4aHhp-sN7fEQ-JYfJqnhrEdsM.jpg" alt="" /> <img id="soir8a" class="soire" src="http://ekladata.com/Rfdg42JXboCB9qI-CB9enWca2nI.jpg" alt="" /></div>
<hr style="border:4px double black;">
<style><!--
#expa{position:absolute; z-index:1; width:200px; height:30px; font-size:30px; transform:translate(350px,200px);}
.soire{position:absolute; z-index:1; width:800px; height:450px; transition:all 1s;}
#soir5a{transform:translate(0px,0px) perspective(100px) rotatex(-45deg); transform-origin:top center;}
#soir6a{transform:translate(0px,100px) perspective(100px) rotatex(-45deg); transform-origin:top center;}
#soir7a{transform:translate(0px,-100px) perspective(100px) rotatex(45deg); transform-origin:bottom center;}
#soir8a{transform:translate(0px,0px) perspective(100px) rotatex(45deg); transform-origin:bottom center;}
#soir5a:hover,#soir6a:hover,#soir7a:hover,#soir8a:hover{z-index:5;transform:translate(0px,0px) perspective(1000px) rotatex(0deg);}
--></style>

Survol

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

<div style="position: relative; margin: 30px auto; width: 800px; height: 600px; text-align: left;">
<p id="exp">Survol</p>
<img id="soir1a" class="soir" src="http://ekladata.com/WyoFF5V1LMvN54oBm2g8GzlpL9U.jpg" alt="" /> <img id="soir2a" class="soir" src="http://ekladata.com/RBc_RfQkuwzh83sx0jWncluzfsk.jpg" alt="" /> <img id="soir3a" class="soir" src="http://ekladata.com/Lt4aHhp-sN7fEQ-JYfJqnhrEdsM.jpg" alt="" /> <img id="soir4a" class="soir" src="http://ekladata.com/Rfdg42JXboCB9qI-CB9enWca2nI.jpg" alt="" /></div>

<style><!--

#exp{position:absolute; z-index:1; width:300px; height:30px; font-size:30px; transform:translate(350px,280px);}
.soir{position:absolute; z-index:1; width:800px; height:600px; transition:all 1s;}
#soir1a{transform:translate(0px,0px) perspective(100px) rotatex(-45deg); transform-origin:top center;}
#soir2a{transform:translate(0px,150px) perspective(100px) rotatex(-45deg); transform-origin:top center;}
#soir3a{transform:translate(0px,-150px) perspective(100px) rotatex(45deg); transform-origin:bottom center;}
#soir4a{transform:translate(0px,0px) perspective(100px) rotatex(45deg); transform-origin:bottom center;}
#soir1a:hover,#soir2a:hover,#soir3a:hover,#soir4a:hover{z-index:5;transform:translate(0px,0px) perspective(1000px) rotatex(0deg);} 

--></style>