• Montage 6

    Pour le changement de forme, je vous conseille le site: http://bennettfeely.com/clippy/ qui vous donne le code directement; la difficulté est de le modifier pour le ramener à la forme du montage.

     

     

     

     

     

     

     

     

    Clic maintenu.


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.4vh ridge white; background: linear-gradient(45deg, #f3e2c7 0%,#c19e67 33%,#b68d4c 65%,#e9d4b3 100%);">
    <p id="el1" class="el">&nbsp;</p>
    <p id="el2" class="el">&nbsp;</p>
    <p id="el3" class="el">&nbsp;</p>
    <p id="el4" class="el">&nbsp;</p>
    <p id="el5" class="el">&nbsp;</p>
    <p id="el6" class="el">&nbsp;</p>
    <p id="el7" class="el">&nbsp;</p>
    <p id="el8" class="el">&nbsp;</p>
    <p id="el9">Clic maintenu.</p>
    </div>

    <style><!--
    .el{position:absolute; z-index:1; width:10vw; height:10vw; transition:all 1s linear;-webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
    clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);}
    #el1{transform:translate(4vw,3vw) rotatey(180deg); background:url('http://ekladata.com/5B8qBPjwomc6iBy598sDa_pUGm4.jpg'); background-size:60vw 33.75vw;}
    #el2{transform:translate(18vw,3vw) rotatey(180deg); background:url('http://ekladata.com/vciCIPd99g5qO8iC7H2HOOAFHnE.jpg'); background-size:60vw 33.75vw;}
    #el3{transform:translate(32vw,3vw) rotatey(180deg); background:url('http://ekladata.com/mkL7LtYwWSycjXf0DeaErF2j_64.jpg'); background-size:60vw 33.75vw;}
    #el4{transform:translate(46vw,3vw) rotatey(180deg); background:url('http://ekladata.com/LmHnZhG8ECE0nXCnN9W9gVFUhmo.jpg'); background-size:60vw 33.75vw;}
    #el5{transform:translate(4vw,20vw) rotatey(180deg); background:url('http://ekladata.com/XNUs3CPCR0Pj_Bhp3ZRwrlESgzE.jpg'); background-size:60vw 33.75vw;}
    #el6{transform:translate(18vw,20vw) rotatey(180deg); background:url('http://ekladata.com/5fid5vYwlCglZL-L_sVS2sD5_YI.jpg'); background-size:60vw 33.75vw;}
    #el7{transform:translate(32vw,20vw) rotatey(180deg); background:url('http://ekladata.com/fV6i7xuFTafuzI7OzEiA5UytIKw.jpg'); background-size:60vw 33.75vw;}
    #el8{transform:translate(46vw,20vw) rotatey(180deg); background:url('http://ekladata.com/3VwxyQaQMzGIpRMI1qUTNX0Efyo.jpg'); background-size:60vw 33.75vw;}
    #el9{position:absolute; z-index:1; width:25vw; text-align:center; font-size:2.5vw; color:#60E1F2; text-shadow:0.1vh 0.1vh black; transform:translate(17vw,14vw);}
    #el1:active,#el2:active,#el3:active,#el4:active,#el5:active,#el6:active,#el7:active,#el8:active{z-index:10;transform:translate(0vw,0vw) rotatey(0deg);width:60vw; height:33.75vw;-webkit-clip-path: polygon(50% 0%, 100% 0%, 100% 60%, 100% 100%, 0% 100%, 0% 60%, 0% 0%);
    clip-path: polygon(50% 0%, 100% 0%, 100% 60%, 100% 100%, 0% 100%, 0% 60%, 0% 0%);}
    --></style>