L'implementazione di HTML5 sì CSS3 Non solo ha fornito un nuovo modo di standardizzare gli elementi di una pagina, dando la possibilità di inserire nuovi elementi che fornissero un maggior grado di utilità nello sviluppo di applicazioni web, ma ha anche permesso di ampliare le possibilità di queste, lasciando a parte lingue come JavaScript per effetti e transizioni grazie a CSS3.
Ovviamente ci sono librerie di JavaScript che hanno effetti incredibili e rendono la loro implementazione abbastanza semplice, ma il più delle volte questa funzionalità è incapsulata e le possibilità di modifiche sono molto complicate.
Per questi casi possiamo usare CSS3 e con un po' di lavoro possiamo ottenere effetti e funzionalità davvero sorprendenti come una giostra, cosa che in passato era possibile solo con JavaScript.
Creare il nostro carosello
Per prima cosa includeremo il codice HTML per il nostro carosello, che sarà abbastanza semplice poiché includerà solo l'inclusione del nostro foglio di stile, il tag per indicare che tutto ciò che è al suo interno sarà contenuto grafico, come foto, diagrammi o in questo caso il nostro carosello:
Carosello CSS3È importante evidenziare le classi che abbiamo incluso nel nostro div, poiché sono quelle che ci permetteranno di eseguire la manipolazione nel nostro css. Fatto ciò, procederemo all'implementazione del nostro foglio di stile, iniziando prima dando ai nostri elementi un aspetto 3D, per questo utilizzeremo la proprietà prospettiva sì trasformare:
.cards {posizione: assoluta; superiore: 50%; sinistra: 50%; larghezza: 190px; altezza: 210px; margine: 0; -prospettiva webkit: 800px; prospettiva: 800 px; -webkit-transform: traduci (-50%, -50%); -ms-transform: traduci (-50%, -50%); trasforma: traduci (-50%, -50%); }Avendo questo, includeremo alcune animazioni per dargli lo stile carosello che funziona secondo una regola che definiremo in seguito, definiamo anche i secondi in cui vogliamo che effettui le transizioni e impostiamo la posizione per le nostre carte all'interno la giostra:
.cards__content {posizione: assoluta; larghezza: 100%; altezza: 100%; -webkit-transform-style: preserva-3d; stile di trasformazione: preserva-3d; -webkit-transform: translateZ (-182px) ruotareY (0); trasforma: translateZ (-182px) ruotareY (0); -webkit-animazione: carosello 10s infinito cubic-bezier (1, 0,015, 0,295, 1,225) in avanti; animazione: giostra 10s infinito cubic-bezier (1, 0,015, 0,295, 1,225) in avanti; } .cards__element {posizione: assoluta; in alto: 0; sinistra: 0; larghezza: 190px; altezza: 210px; raggio di confine: 6px; }Ora lavoreremo sulla scheda separatamente utilizzando ennesimo figlio, questo per inserire un colore di sfondo diverso per ciascuno di questi e la gestione delle transizioni per loro:
.cards__element: nth-child (1) {background: # 394fd5; -webkit-transform: ruotareY (0) translateZ (182px); trasformare: ruotareY (0) translateZ (182px); } .cards__element: nth-child (2) {background: # 39d570; -webkit-transform: rotateY (120deg) translateZ (182px); trasformare: ruotareY (120deg) translateZ (182px); } .cards__element: nth-child (3) {background: # f0091f; -webkit-transform: rotateY (240deg) translateZ (182px); trasformare: ruotareY (240deg) translateZ (182px); }Infine impostiamo un colore di sfondo per il corpo e aggiungiamo le nostre regole per la parola carosello, lo facciamo con fotogrammi chiave che è responsabile della definizione del codice per l'animazione:
corpo {sfondo: # 6c4949; } @ -webkit-keyframes carosello {0%, 17,5% {-webkit-transform: translateZ (-182px) rotateY (0); trasforma: translateZ (-182px) ruotareY (0); } 27,5%, 45% {-webkit-transform: translateZ (-182px) rotateY (-120deg); trasforma: translateZ (-182px) rotateY (-120deg); } 55%, 72,5% {-webkit-transform: translateZ (-182px) rotateY (-240deg); trasforma: translateZ (-182px) rotateY (-240deg); } 82,5%, 100% {-webkit-transform: translateZ (-182px) rotateY (-360deg); trasforma: translateZ (-182px) rotateY (-360deg); }} @keyframes carosello {0%, 17,5% {-webkit-transform: translateZ (-182px) rotateY (0); trasforma: translateZ (-182px) ruotareY (0); } 27,5%, 45% {-webkit-transform: translateZ (-182px) rotateY (-120deg); trasforma: translateZ (-182px) ruotareY (-120deg); } 55%, 72,5% {-webkit-transform: translateZ (-182px) rotateY (-240deg); trasforma: translateZ (-182px) rotateY (-240deg); } 82,5%, 100% {-webkit-transform: translateZ (-182px) rotateY (-360deg); trasforma: translateZ (-182px) ruotareY (-360deg); }}Fatto questo, vediamo come appare il nostro carosello animato nel nostro browser:
Come possiamo vedere, è abbastanza semplice ma soddisfa le sue funzionalità e ciò che è ancora meglio senza utilizzare una singola riga di codice in JavaScriptNon resta che prendere l'esempio e sperimentare un po', aumentandone le dimensioni, aggiungendo immagini e cambiando lo stile della giostra, cosa del tutto possibile per come è stata costruita.
