• SANTORINI

    SANTORINI

  • SANTORINI

    SANTORINI

  • ZAKYNTHOS

    ZAKYNTHOS

  • LEYKADA

    LEYKADA

  • KEFALLONIA

    KEFALLONIA

  • KERKYRA

    KERKYRA

  • RODOS

    RODOS

GADGETS FOR BLOGS

YouTube GITHUB glitch.com JSBIN Start.me JSFIDDLE CODEPLY PASTEBIN.COM Repl.it CODEPEN CODEPEN

3D CAROUSEL SLIDESHOW No 1

3D-slideshow
3D CAROUSEL SLIDESHOW-1
Με τον παρακάτω κώδικα μπορείτε να βάλετε ένα 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>

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

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

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

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