![](https://secure.gravatar.com/avatar/069849e93b798a9aee2c38a6d6b6a85d?s=150&d=https%3A%2F%2Fwww.maxlaferla.it%2Fwp-content%2Fthemes%2Fmax%2Fassets%2Fgravatar.gif&r=g)
Pubblicato da: Max
In data:
6 Feb 2022
Tempo di lettura:
![Loader 3D in CSS](https://www.maxlaferla.it/wp-content/uploads/2022/02/cover-1-300x250.png)
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 -:)