• Exemple 4

    Toujours selon le même principe et au clic, nous pouvons ajouter une animation en rotation.

    X


    <div style="width: 60vw; height: 33.75vw; text-align: left; margin: 1vh auto; border: 0.6vh ridge grey; background: radial-gradient(ellipse at center, #F6E3CE 0%,#F5D0A9 45%,#F5D0A9 100%);">
    <p id="cb0">X</p>
    <input id="ccd1" class="ccd" src="http://ekladata.com/pROjgrymu_wupfKSYvoGp-KV8Fs.jpg" type="image" /> <input id="ccd2" class="ccd" src="http://ekladata.com/_3ePHWmXBMGkV73BpKWUSR8q4zo.jpg" type="image" /> <input id="ccd3" class="ccd" src="http://ekladata.com/KypIZeGIabUmTrCsii50Mawee8Q.jpg" type="image" /> <input id="ccd4" class="ccd" src="http://ekladata.com/TPafPM3Lj-a7vnV81JdFWl-4NFA.jpg" type="image" /> <input id="ccd5" class="ccd" src="http://ekladata.com/CLOThk2Z-laWx4zToHmohhc_4o4.jpg" type="image" /> <input id="ccd6" class="ccd" src="http://ekladata.com/cas_vjWkQn3PQbhnGdp2S9BxtAE.jpg" type="image" /> <input id="ccd7" class="ccd" src="http://ekladata.com/eYXWMD1CIhvXgoLYo4DmIcIOxJ0.jpg" type="image" /> <input id="ccd8" class="ccd" src="http://ekladata.com/l8DK3GX-bgZjpa45OsURdygwoN4.jpg" type="image" /></div>
    <hr style="border: 0.3vh double grey;" />
    <p>...</p>
    <style><!--
    #cb0{position:absolute; z-index:16; width:10vw; transform:translate(53vw,0vw); text-align:center; font-size:2vw; color:white; text-shadow:0.1vh 0.1vh black;}
    .ccd{position:absolute; width:16vw; height:9vw; border:0.4vh solid white; background-size:cover; transition:all 1s linear;}
    #ccd1{z-index:10; transform:translate(5vw,22vw) rotateY(180deg);}
    #ccd2{z-index:9; transform:translate(10vw,19vw) rotateY(180deg);}
    #ccd3{z-index:8; transform:translate(15vw,16vw) rotateY(180deg);}
    #ccd4{z-index:7; transform:translate(20vw,13vw) rotateY(180deg);}
    #ccd5{z-index:6; transform:translate(25vw,11vw) rotateY(180deg);}
    #ccd6{z-index:5; transform:translate(30vw,8vw) rotateY(180deg);}
    #ccd7{z-index:4; transform:translate(35vw,5vw) rotateY(180deg);}
    #ccd8{z-index:3; transform:translate(40vw,2vw) rotateY(180deg);}
    #ccd1:focus,#ccd2:focus,#ccd3:focus,#ccd4:focus,#ccd5:focus,#ccd6:focus,#ccd7:focus,#ccd8:focus{z-index:15; width:60vw; height:33.75vw; border:none;transform:translate(0vw,0vw) rotateY(0deg);}
    --></style>