3D CAROUSEL SLIDESHOW

3D-slideshow
3D CAROUSEL SLIDESHOW
Με τον παρακάτω κώδικα μπορείτε να βάλετε ένα 3D CAROUSEL SLIDESHOW στο blog σας. Μπορείτε να αλλάξετε αν θέλετε τα μεγέθη των εικόνων αλλά αναλογικά πάντα για να μην έχετε παραμόρφωση. Οι εικόνες του συγκεκριμένου slideshow πρέπει να είναι 9 ουτε παραπάνω ούτε παρακάτω. Αλλάξτε τις εικόνες μου με τα μώβ link με τις δικές σας. Αν είναι διαφορετικό μέγεθος τότε αλλάξτε τις διαστάσεις στην 3η γραμμή του κώδικα, στην 7η γραμμή του κώδικα, στις γραμμές 9-17 εκεί που γράφει 320px, και μέσα στα links των εικόνων εκεί που γράφει width="208" height="130".



<style>
*{margin: 0;padding: 0;outline: none;border:none;box-sizing:border-box;}
*:before, *:after {box-sizing: border-box;}
.container {margin: 5% auto;width: 240px;height: 150px;position: relative;perspective: 1000px;}
#carousel {width: 100%;height: 100%;position: absolute;transform-style: preserve-3d;animation: rotation 20s infinite linear;}
#carousel:hover {animation-play-state: paused;}
#carousel figure {display: block;position: absolute;width:208px;height:130px;left:10px;top:10px; background:#115599;overflow: hidden;border: solid 2px #115599;}
#carousel figure:nth-child(1) {transform: rotateY(0deg) translateZ(320px);}
#carousel figure:nth-child(2) { transform: rotateY(40deg) translateZ(320px);}
#carousel figure:nth-child(3) { transform: rotateY(80deg) translateZ(320px);}
#carousel figure:nth-child(4) { transform: rotateY(120deg) translateZ(320px);}
#carousel figure:nth-child(5) { transform: rotateY(160deg) translateZ(320px);}
#carousel figure:nth-child(6) { transform: rotateY(200deg) translateZ(320px);}
#carousel figure:nth-child(7) { transform: rotateY(240deg) translateZ(320px);}
#carousel figure:nth-child(8) { transform: rotateY(280deg) translateZ(320px);}
#carousel figure:nth-child(9) { transform: rotateY(320deg) translateZ(320px);}
img {cursor: pointer;transition: all .5s ease;}
img:hover {transform: scale(1.2,1.2);}
@keyframes rotation {from{transform: rotateY(0deg);}
to {transform: rotateY(360deg);}}
</style>

<div class="container">
<div id="carousel">
<figure><img src="https://lh4.googleusercontent.com/-RA6WwNSgQZs/UiiI00-Hd4I/AAAAAAAAJLk/wAesP7BV1XY/w208-h130-no/LEYKADA-40.jpg" alt="LEYKADA" width="208" height="130"></figure>
<figure><img src="https://lh6.googleusercontent.com/-rYFEmmnBIPc/UiiIsH-kt3I/AAAAAAAAJK0/wxyhIm00mb4/w208-h130-no/LEYKADA-15.jpg" alt="LEYKADA" width="208" height="130"></figure>
<figure><img src="https://lh5.googleusercontent.com/-xoRjaryAc9g/UiiJQylwIqI/AAAAAAAAJMU/pmISgNnhBIw/w208-h130-no/KERKYRA-16.jpg" alt="KERKYRA" width="208" height="130"></figure>
<figure><img src="https://lh3.googleusercontent.com/-iOVUvdDaKYs/UneTpxlN0_I/AAAAAAAAJtg/WwRlzagKsmQ/w208-h130-no/KEFALONIA-27.JPG" alt="KEFALONIA" width="208" height="130"></figure>
<figure><img src="https://lh5.googleusercontent.com/-HVjJAI6w9oo/UneTzBuu6UI/AAAAAAAAJuA/Fl47Ee-i42A/w208-h130-no/KEFALONIA-30.jpg" alt="KEFALONIA" width="208" height="130"></figure>
<figure><img src="https://lh3.googleusercontent.com/-iHpUXMPF_2U/UiiIviNxdII/AAAAAAAAJLM/7Q8ShXmAat0/w208-h130-no/LEYKADA-24.jpg" alt="LEFKADA" width="208" height="130"></figure>
<figure><img src="https://lh5.googleusercontent.com/-K7auwzq2lPk/UiiIvU7QHPI/AAAAAAAAJLI/c5aQs1DrUUw/w208-h130-no/LEFKADA-03.jpg" alt="LEFKADA" width="208" height="130"></figure>
<figure><img src="https://lh6.googleusercontent.com/-BaLHN2zvMfA/Unedm8xQ1uI/AAAAAAAAKCs/nftivsUvIuE/w208-h130-no/SKIATHOS-20.jpg" alt="SKIATHOS" width="208" height="130"></figure>
<figure><img src="https://lh4.googleusercontent.com/-SsVOsOo7Ck8/UhTEq2KOgkI/AAAAAAAAIx8/G-rHBQxmMjA/w208-h130-no/SKOPELOS-30.jpg" alt="SKOPELOS" width="208" height="130"></figure>
</div></div>