Loader 3D in CSS

Ciao! Nel video-tutorial di oggi, realizzeremo un

Loader 3D in CSS.

Impostiamo come sempre la nostra pagina minima html, e all’interno del body, creiamo il contenitore principale del nostro progetto: un div con classe container.

All’interno di container, inseriamo una serie di span, sufficienti ad ottenere il loader che vogliamo ottenere. Passiamo al foglio di stile, e grazie al selettore universale asterisco, resettiamo margini e padding di ogni elemento del nostro progetto. Assegniamo al body un background.

Continuiamo a stilizzare il body, assegnandogli un display:flex, un altezza minima di 100% del viewport e posizioniamo gli elementi al centro.

Stilizziamo il container, dandogli un altezza e una larghezza di 300px, e la regola

transform-style:preserve-3d

Che come possiamo intuire, permette di preservare la trasformazione 3D degli elementi figli del contenitore.

Proseguiamo assegnando a container, una trasformazione in prospettiva di 500px, e una rotazione lungo l’asse delle X, di 60deg.

Assegniamo uno stile comune a tutti gli span, e un’animation che chiameremo animazione

Stilizziamo il primo ( span:nth-child(1) ) figlio di container

Duplichiamo, modifichiamo e continuiamo così fino all’ultimo.

Arrivati all’ultimo span, inseriamo l’animazione con i diversi frame del movimento

Bene! Abbiamo concluso la realizzazione di un Loader 3D.

Per scaricare i file realizzati durante il video-tutorial, clicca sul tasto Download, e dopo decomprimi il file ZIP.

Puoi guardare il video-tutorial completo sul mio canale YouTube, dove troverai tantissimi altri video su HTML, CSS, PHP.

Ciao! Alla prossima -:)

---