24.03.2024

Une variante du montage précédent.

SURVOL

<div style="width: 1100px; height: 619px; text-align: left; margin: 50px auto;">
<p id="sv">SURVOL</p>
<img id="aze1" class="aze" src="http://ekladata.com/VIIOyOPKjITjSlQhN4g2JXN1L00.jpg" alt="" /> <img id="aze2" class="aze" src="http://ekladata.com/5uJ00A8azG8O2owaeDcW1RhaeSo.jpg" alt="" /> <img id="aze3" class="aze" src="http://ekladata.com/D9gRE8pXsTX6UPD_7xC90zQnq-M.jpg" alt="" /> <img id="aze4" class="aze" src="http://ekladata.com/L6U7i4f-GpN5Qkc_12KamOKtrCY.jpg" alt="" /> <img id="aze5" class="aze" src="http://ekladata.com/RAoRkm5G0TwVeIpG1kAxVAHgamE.jpg" alt="" /></div>
<style><!--
#sv{position:absolute; z-index:1; font-size:25px; transform:translate(500px,20px);}
.aze{position:absolute; z-index:1; transition:all 1s;}
#aze1{box-sizing:border-box; width:1100px; height:619px; border:4px solid white; box-shadow:4px 4px 8px black; transform-origin:left center; transform:translate(0px,0px) perspective(1500px) rotatey(70deg);}
#aze2{box-sizing:border-box; width:700px; height:350px; border:4px solid white; box-shadow:4px 4px 8px black; transform-origin:left center; transform:translate(230px,135px) perspective(1200px) rotatey(70deg);}
#aze3{box-sizing:border-box; width:320px; height:220px; border:4px solid white; box-shadow:0px 4px 8px black; transform:translate(390px,200px) ;}
#aze4{box-sizing:border-box; width:700px; height:350px; border:4px solid white; box-shadow:-4px 4px 8px black; transform-origin:right center; transform:translate(170px,135px) perspective(1200px) rotatey(-70deg);}
#aze5{box-sizing:border-box; width:1100px; height:619px; border:4px solid white; box-shadow:-4px 4px 8px black; transform-origin:right center; transform:translate(0px,0px) perspective(1500px) rotatey(-70deg);}
#aze1:hover,#aze2:hover,#aze3:hover,#aze4:hover,#aze5:hover{z-index:5; width:1100px; height:619px; transform:translate(0px,0px) perspective(5000px) rotatex(0deg);}
--></style>