GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr DIIGO Start.me feedburner

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="http://i.imgur.com/I9SFA0sl.jpg" alt="ZAKYNTHOS" width="208" height="130"></figure>
<figure><img src="http://i.imgur.com/gCr4ycDl.jpg" alt="LEYKADA" width="208" height="130"></figure>
<figure><img src="http://i.imgur.com/Pq9Dexal.jpg" alt="KERKYRA" width="208" height="130"></figure>
<figure><img src="http://i.imgur.com/XMS6PHsl.jpg" alt="KEFALONIA" width="208" height="130"></figure>
<figure><img src="http://i.imgur.com/bVvl5ywl.jpg" alt="KYTHYRA" width="208" height="130"></figure>
<figure><img src="http://i.imgur.com/JcRaeRSl.jpg" alt="ITHAKI" width="208" height="130"></figure>
<figure><img src="http://i.imgur.com/kbCkBYel.jpg" alt="PAXOI" width="208" height="130"></figure>
<figure><img src="http://i.imgur.com/Z7B3z0Fl.jpg" alt="SKIATHOS" width="208" height="130"></figure>
<figure><img src="http://i.imgur.com/UMQ2IrDl.jpg" alt="ALONHSSOS" width="208" height="130"></figure>
</div></div>

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.