• Montage 107

    Cet exemple est pour 8 images en 16/9 mais on peut adapter à ses besoins.

    Clic maintenu

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; border: 0.1vh solid black; margin: 1vh auto; background: radial-gradient(ellipse at center, #f3e2c7 0%,#c19e67 50%,#b68d4c 51%,#e9d4b3 100%);">
    <p id="cc">Clic maintenu</p>
    <p id="rot1" class="rot">&nbsp;</p>
    <p id="rot2" class="rot">&nbsp;</p>
    <p id="rot3" class="rot">&nbsp;</p>
    <p id="rot4" class="rot">&nbsp;</p>
    <p id="rot5" class="rot">&nbsp;</p>
    <p id="rot6" class="rot">&nbsp;</p>
    <p id="rot7" class="rot">&nbsp;</p>
    <p id="rot8" class="rot">&nbsp;</p>
    </div>
    <style><!--
    #cc{position:absolute; z-index:1; width:10vw; border:0.1vh solid black; transform:translate(25vw,0.5vw); text-align:center; font-size:1.2vw;}
    .rot{position:absolute; z-index:1; width:16vw; height:9vw; border-radius:3vw; border:0.6vh ridge white; box-shadow:0.4vh 0.4vh 0.6vh black; transform-origin:50% 50%; transition:all 1s linear;}
    #rot1{box-sizing:border-box; background:url('http://ekladata.com/Rgj_qr34O3TMKKmQLZF0ehf-wYw.jpg'); background-size:cover; transform: translate(5vw,2vw) perspective(20vw) rotatex(40deg) rotatey(10deg) rotatez(30deg);}
    #rot2{box-sizing:border-box; background:url('http://ekladata.com/XsOeK_LqROZcis72-33hF2fbcdY.jpg'); background-size:cover; transform: translate(5vw,11vw) perspective(20vw) rotatex(40deg) rotatey(10deg) rotatez(30deg); transition:all 1s linear;}
    #rot3{box-sizing:border-box; background:url('http://ekladata.com/kn3oIsCjdbt-AL2VZHiDzkfQDTs.jpg'); background-size:cover; transform: translate(5vw,20vw) perspective(20vw) rotatex(40deg) rotatey(10deg) rotatez(30deg); transition:all 1s linear;}
    #rot4{box-sizing:border-box; background:url('http://ekladata.com/v-Q1Z7XXmRnVAiWeTjD1MWcO2-8.jpg'); background-size:cover; transform: translate(22.5vw,10vw) perspective(20vw) rotatex(40deg) rotatey(0deg) rotatez(0deg); transition:all 1s linear;}
    #rot5{box-sizing:border-box; background:url('http://ekladata.com/FcgPDfOU05Yb1auPtlGfEUxeVL4.jpg'); background-size:cover; transform: translate(22.5vw,20vw) perspective(20vw) rotatex(40deg) rotatey(0deg) rotatez(0deg); transition:all 1s linear;}
    #rot6{box-sizing:border-box; background:url('http://ekladata.com/Ez_g3aqNGk_KHoIsIZ6xysec2J0.jpg'); background-size:cover; transform: translate(40vw,2vw) perspective(20vw) rotatex(40deg) rotatey(-10deg) rotatez(-30deg); transition:all 1s linear;}
    #rot7{box-sizing:border-box; background:url('http://ekladata.com/l-Mb96jCKwzSamvLKZ5QJAmV4yI.jpg'); background-size:cover; transform: translate(40vw,11vw) perspective(20vw) rotatex(40deg) rotatey(-10deg) rotatez(-30deg); transition:all 1s linear;}
    #rot8{box-sizing:border-box; background:url('http://ekladata.com/plefCh5YYXdL2ZXu2mtENaKg3hg.jpg'); background-size:cover; transform: translate(40vw,20vw) perspective(20vw) rotatex(40deg) rotatey(-10deg) rotatez(-30deg); transition:all 1s linear;}
    #rot1:active,#rot2:active,#rot3:active,#rot4:active,#rot5:active,#rot6:active,#rot7:active,#rot8:active{z-index:5; width:60vw; height:33.75vw; transform: translate(0vw,0vw) perspective(150vw) rotatex(0deg) rotatey(0deg) rotatez(0deg); border-radius:0%; box-shadow:none;}
    --></style>