Come creare carosello di immagine con effetto 3D

Utilizzando  linguaggi CSS3 e HTML5 posiamo crere un carosello di immagini con effetto 3D. E per gestirla vedimo di usare javascript.

Direi prima di proseguire vedere subitto il nostro carosello 3D.

Cliccando le frecce sulla destra e sinistra le nostre immagini scorono facendo un giro del mondo.

Markup HTML del carosello 3D

La struttura della galleria è molto semplice: otto immagini sono situati nel elemento figure, avvolti in un div.

<div id=gallery>
<figure id=spinner >
<img src=wanaka-tree.jpg alt="">
<img src=still-lake.jpg alt="">
<img src=pink-milford-sound.jpg alt="">
<img src=paradise.jpg alt="">
<img src=morekai.jpg alt="">
<img src=milky-blue-lagoon.jpg alt="">
<img src=lake-tekapo.jpg alt="">
<img src=milford-sound.jpg alt="">
</figure>
</div>

Stili css

Il CSS originale è anche molto semplice: tutte le immagini si trovano intorno al elemento figure lungo l'asse z. Velocità di movimento è indicata nella proprieta transition.

body { background: #100000; font-size: 1.5rem; }
div#gallery { perspective: 1200px; }
figure#spinner { transform-style: preserve-3d; min-height: 122px; transform-origin: 50% 50% -500px; transition: 1s; }
figure#spinner img { width: 40%; position: absolute; left: 30%; transform-origin-z: 50% 50% -500px; outline: 1px solid transparent; }

Successivamente, tutte le immagini sono equidistanti intorno all'asse centrale, con aiuto di pseudo selettori  nth-child:

figure#spinner img:nth-child(1) { transform:rotateY(0deg); }
figure#spinner img:nth-child(2) { transform:rotateY(-45deg); }
figure#spinner img:nth-child(3) { transform:rotateY(-90deg); }
figure#spinner img:nth-child(4) { transform:rotateY(-135deg); }
figure#spinner img:nth-child(5) { transform:rotateY(-180deg); }
figure#spinner img:nth-child(6) { transform:rotateY(-225deg); }
figure#spinner img:nth-child(7) { transform:rotateY(-270deg); }
figure#spinner img:nth-child(8) { transform:rotateY(-315deg); }

Se aumenta la dimensione dello schermo, l'immagine rimane la stessa, e la distanza tra di loro - cresce.

In questo esempio sono stati eliminati prefissi browser. Il codice completo è disponibile nel fail scaricabile qui sotto.

E per gestire useremo JavaScript

Abbiamo anche bisogno di inserire alcuni elementi aggiuntivi con le quali si farà scorrere le immagini del carosello in un senso o nell'altro. Aggiungiamo questi due link:

<a href=# style=float:leftonclick="galleryspin('-')">?</a>
<a href=# style=float:rightonclick="galleryspin('')">?</a>

Quando si fa clic sulla freccia a sinistra nella galleryspin(elemento del nostro js) verra passato segno meno:

var angle = 0;
function galleryspin(sign) {
spinner = document.querySelector("#spinner");
if (!sign) { angle = angle + 45; } else {angle = angle - 45; }
spinner.setAttribute("style","-webkit-transform: rotateY("+ angle +"deg); transform: rotateY("+ angle +"deg);");
}

A seconda dei valori ottenuti, il contenuto viene spostato di 45 gradi.

Il codice completto con esempio puoi scraicare qui sotto

 

Letto 2567 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso