• Exemple 61

    1+8 images au ratio 16/9 redimensionnées par le code en 1152x648px. 

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; border: 0.1vh solid black; margin: 1vh auto; text-align: left; background: url('http://ekladata.com/Y9wKNdy89DUnEibhAD5fOqEhIQU@1152x648.png'); background-size: cover;">
    <p id="per1" class="per">&nbsp;</p>
    <p id="per2" class="per">&nbsp;</p>
    <p id="per3" class="per">&nbsp;</p>
    <p id="per4" class="per">&nbsp;</p>
    <p id="per5" class="per1">&nbsp;</p>
    <p id="per6" class="per1">&nbsp;</p>
    <p id="per7" class="per1">&nbsp;</p>
    <p id="per8" class="per1">&nbsp;</p>
    </div>
    <style><!--
    .per{position:absolute; z-index:1; width:24vw; height:13.5vw; border:0.4vh solid white; transition:all 1s linear;}
    .per1{position:absolute; z-index:1; width:13.5vw; height:24vw; border:0.4vh solid white; transition:all 1s linear;}
    #per1{box-sizing:border-box; background:url('http://ekladata.com/AyOnttgNe3XIb6JW0tMjMP86API@1152x648.jpg'); transform:translate(0vw,2vw) perspective(10vw) rotatey(60deg); transform-origin:center left;}
    #per2{box-sizing:border-box; background:url('http://ekladata.com/6USRhXVDTjAbB8WJNm3qwcLSSAQ@1152x648.jpg'); transform:translate(36vw,2vw) perspective(10vw) rotatey(-60deg); transform-origin:center right;}
    #per3{box-sizing:border-box; background:url('http://ekladata.com/F75jwpkuZMy4rzfm4ppUhNuOjPk@1152x648.jpg'); transform:translate(0vw,20vw) perspective(10vw) rotatey(60deg); transform-origin:center left;}
    #per4{box-sizing:border-box; background:url('http://ekladata.com/LXLHoqsEoelzzmI0TNy_j005BsI@1152x648.jpg'); transform:translate(36vw,20vw) perspective(10vw) rotatey(-60deg); transform-origin:center right;}
    #per5{box-sizing:border-box; background:url('http://ekladata.com/Zjz9KQD7Ph0kCrvnydDHgyxswIU@1152x648.jpg'); transform:translate(12vw,0vw) perspective(10vw) rotatex(-60deg); transform-origin:top center;}
    #per6{box-sizing:border-box; background:url('http://ekladata.com/0orMAVErUyi-mdppnv31POSekkA@1152x648.jpg'); transform:translate(33vw,0vw) perspective(10vw) rotatex(-60deg); transform-origin:top center;}
    #per7{box-sizing:border-box; background:url('http://ekladata.com/NV_debTTOpQ6Hg9mfilujihirRo@1152x648.jpg'); transform:translate(12vw,10vw) perspective(10vw) rotatex(60deg); transform-origin:bottom center;}
    #per8{box-sizing:border-box; background:url('http://ekladata.com/_oBjEhpNEk3Vk6N7zZDnxr5vhoA@1152x648.jpg'); transform:translate(33vw,10vw) perspective(10vw) rotatex(60deg); transform-origin:bottom center;}

    #per1:hover,#per2:hover,#per3:hover,#per4:hover{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw) perspective(100vw) rotatey(0deg);}
    #per5:hover,#per6:hover,#per7:hover,#per8:hover{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw) perspective(100vw) rotatex(0deg);}
    --></style>