23.03.2024

 En pensant aux pyramides à degrés, vues à la télévision dernièrement.

 5 images dans un cadre de 1100px par 619px, modifiable en dimensions.

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(150px,20px);}
.aze{position:absolute; z-index:1; transition:all 1s;}
#aze1{box-sizing:border-box; width:1100px; height:619px; border:4px solid white; transform-origin:bottom center; transform:translate(0px,0px) perspective(1500px) rotatex(70deg);}
#aze2{box-sizing:border-box; width:700px; height:420px; border:4px solid white; transform-origin:bottom center; transform:translate(200px,45px) perspective(1200px) rotatex(65deg);}
#aze3{box-sizing:border-box; width:500px; height:300px; border:4px solid white; transform-origin:bottom center; transform:translate(300px,30px) perspective(1100px) rotatex(60deg);}
#aze4{box-sizing:border-box; width:350px; height:250px; border:4px solid white; transform-origin:bottom center; transform:translate(375px,-40px) perspective(1100px) rotatex(60deg);}
#aze5{box-sizing:border-box; width:250px; height:200px; border:4px solid white; transform-origin:bottom center; transform:translate(425px,-95px) perspective(1100px) rotatex(60deg);}
#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>