-
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>