• Montage 31

    Une idée à essayer...

    Un amusement en perspective !
    Clic gauche maintenu sur chaque vignette.

     

     

     

     

     

     

     

     



    <div style="width: 60vw; height: 33.75vw; border: 0.6vh ridge #8B4513; background: url('http://ekladata.com/S_cGA68ClBc26Ct7RJO9Jni-gCw/2336.jpg'); margin: 1vh auto;">
    <p id="sc0">Un amusement en perspective !<br />Clic gauche maintenu sur chaque vignette.</p>
    <p id="sc1">&nbsp;</p>
    <p id="sc2">&nbsp;</p>
    <p id="sc3">&nbsp;</p>
    <p id="sc4">&nbsp;</p>
    <p id="sc5">&nbsp;</p>
    <p id="sc6">&nbsp;</p>
    <p id="sc7">&nbsp;</p>
    <p id="sc8">&nbsp;</p>
    </div>

    <style><!--
    #sc0{position:absolute; z-index:1; width:60vw; text-align:center; font-size:1.2vw; color:green; text-shadow:0.1vh 0.1vh black;}
    #sc1{position:absolute; z-index:1; box-sizing:border-box; width:10vw; height:10vw; border:0.2vh solid white; box-shadow:-0.4vh -0.4vh 0.8vh black; background:url('http://ekladata.com/9bkiBneH38TKoSqM3S0T2FbjN24@1152x648.jpg'); background-size:cover; transform:translate(5vw,22vw) perspective(20vw) rotatey(20deg) skewy(-25deg); transform-origin:bottom left; transition:all 1s linear;}
    #sc2{position:absolute; z-index:1; box-sizing:border-box; width:8.5vw; height:8.5vw; border:0.2vh solid white; box-shadow:-0.4vh -0.4vh 0.8vh black; background:url('http://ekladata.com/Trs2CmCqCb3NYf1l-pji3H23YgY@1152x648.jpg'); background-size:cover; transform:translate(13.5vw,19.3vw) perspective(20vw) rotatey(20deg) skewy(-25deg); transform-origin:bottom left; transition:all 1s linear;}
    #sc3{position:absolute; z-index:1; box-sizing:border-box; width:7.2vw; height:7.2vw; border:0.2vh solid white; box-shadow:-0.4vh -0.4vh 0.8vh black;background:url('http://ekladata.com/sejRCKi9Mc3xN-vgQiDvckkmaGA@1152x648.jpg'); background-size:cover; transform:translate(20.8vw,16.8vw) perspective(20vw) rotatey(20deg) skewy(-25deg); transform-origin:bottom left; transition:all 1s linear;}
    #sc4{position:absolute; z-index:1; box-sizing:border-box; width:6.5vw; height:6.5vw; border:0.2vh solid white; box-shadow:0vh -0.4vh 0.8vh black; background:url('http://ekladata.com/qXRyLLFfrkAO-mDJOtGmArCen-k@1152x648.jpg'); background-size:cover; transform:translate(27vw,14.5vw) perspective(200vw) rotatey(0deg) skewy(0deg); transform-origin:bottom left; transition:all 1s linear;}
    #sc5{position:absolute; z-index:1; box-sizing:border-box; width:7.2vw; height:7.2vw; border:0.2vh solid white; box-shadow:0.4vh -0.4vh 0.8vh black; background:url('http://ekladata.com/q33AyuFmOxTn0LHyy2vqdS6GJAA@1152x648.jpg'); background-size:cover; transform:translate(32.5vw,16.8vw) perspective(20vw) rotatey(-20deg) skewy(25deg); transform-origin:bottom right; transition:all 1s linear;}
    #sc6{position:absolute; z-index:1; box-sizing:border-box; width:8.5vw; height:8.5vw; border:0.2vh solid white; box-shadow:0.4vh -0.4vh 0.8vh black; background:url('http://ekladata.com/dqOqtlU8WD9zqca-rsL3GeT82TM@1152x648.jpg'); background-size:cover; transform:translate(38.5vw,19.3vw) perspective(20vw) rotatey(-20deg) skewy(25deg); transform-origin:bottom right; transition:all 1s linear;}
    #sc7{position:absolute; z-index:1; box-sizing:border-box; width:10vw; height:10vw; border:0.2vh solid white; box-shadow:0.4vh -0.4vh 0.8vh black; background:url('http://ekladata.com/UgrvQwnIw11Ymc1Zd0i2jHp5jXQ@1152x648.jpg'); background-size:cover; transform:translate(45.5vw,22vw) perspective(20vw) rotatey(-20deg) skewy(25deg); transform-origin:bottom right; transition:all 1s linear;}
    #sc8{position:absolute; z-index:1; box-sizing:border-box; width:40vw; height:6.5vw; border:0.2vh solid white; box-shadow:0vh 0vh 0.8vh black; background:url('http://ekladata.com/gh7mNCa2Y4JHtGHC4uohT0-zHq0@1152x648.jpg'); background-size:cover; transform:translate(10vw,5vw) perspective(20vw) rotatex(30deg) skewy(0deg); transform-origin:bottom center; transition:all 1s linear;}
    #sc1:active,#sc2:active,#sc3:active,#sc4:active,#sc5:active,#sc6:active,#sc7:active,#sc8:active{z-index:10; width:60vw; height:33.75vw; border:none; transform:translate(0vw,0vw) perspective(200vw) rotatey(0deg) skewy(0deg); box-shadow:none;}
    --></style>



    Attention: les adresses des images hébergées sur Ekla s'écrivent:http://akladata.com/abcdef1234.jpg et il vous faut conserver que la partie en bleue de façon à conserver le dimensionnement pas @1152x648.jpg et la coller à la place des adresses de mes images.