In questo tutorial, ti mostrerò come creare una presentazione 3D usando solo HTML e CSS. Non è richiesto JavaScript! Accendi Safari e cominciamo!
Teoria
Prima di immergerci nella creazione della nostra presentazione, è importante capire il nostro approccio. Useremo le nuove trasformazioni 3D che fanno parte delle specifiche CSS3. Probabilmente hai visto altri tutorial su come utilizzare queste trasformazioni per creare oggetti e animarli in uno spazio 3D. Di solito quando crei una presentazione, faremo affidamento su JavaScript per attivare tali trasformazioni. JavaScript rileverà un evento click e aggiornerà uno dei nostri elementi HTML (in genere aggiungendo una classe). L'elemento aggiornato riceverà quindi nuovi stili CSS.
L'aspetto diverso di questo tutorial è che ignoreremo JavaScript utilizzando solo i CSS per attivare gli eventi di clic e aggiornare gli stili degli elementi. Il recente suggerimento rapido di Jeffrey Way, Mimic a Click Event con CSS, descrive un modo per farlo usando il :bersaglio pseudoclasse. Qui, useremo il :messa a fuoco pseudoclass e l'elemento HTML5 , ma l'idea è la stessa.
Questo metodo non è necessariamente "migliore" dell'uso di JavaScript, ma semplicemente un'alternativa pulita che sfrutta i più recenti elementi HTML5.
Passaggio 0: Introduzione
Iniziamo creando un index.html e style.css. Creeremo anche un immagini cartella.
Il nostro oggetto 3D sarà una scatola rettangolare con quattro 940 px per 400 px facce e due 400 px per 400 px volti. Ho incluso sei immagini nei file sorgente. Inserisci questi, o le tue versioni, nella cartella 'images'.
Passaggio 1: HTML
Di seguito è riportato il nostro HTML di base. Avvolgeremo tutto con a contenitore e la nostra presentazione, naturalmente, si troverà all'interno di un elemento div chiamato Presentazione.
Slideshow CSS 3D
Entro Presentazione aggiungi il seguente codice per le nostre sei immagini:
Nota che le nostre immagini (le sei facce del nostro oggetto 3D) sono avvolte in a con il ID di scatola. Questo elemento è ciò che ruoteremo quando animiamo la nostra presentazione.
Il trucco
Ora arriva il trucco che ci consente di utilizzare solo i CSS per rilevare gli eventi dei clic. Ci avvolgeremo scatola con altre sei elementi. Ognuno rappresenterà una diversa rotazione del nostro oggetto 3D. L'attributo tabindex consente a questi elementi di ricevere lo pseudoclass :messa a fuoco.
Ogni avrà anche bisogno di un elemento al suo interno. Queste didascalie serviranno da pulsanti. Quando si fa clic, attiveranno il genitore ricevere :messa a fuoco. Questo ci permetterà di utilizzare sei diverse trasformazioni CSS scatola.
Potrebbe sembrare un po 'complicato in questo momento, ma avrà senso una volta arrivato al CSS. Per ora, solo avvolgere scatola con sei elementi e dare a ciascuno un unico tabindex e ID. Quindi includi a per ogni .
HTML finale
Il markup finale in index.html dovrebbe assomigliare a questo:
Slideshow CSS 3D
Lato 1Lato 2Lato 3Lato 4Lato 5Lato 6
Passaggio 2: CSS di base
Innanzitutto, apriamoci style.css e incollare alcuni codici di reset, solo per buona misura. (Rimozione di eventuali contorni che :messa a fuoco potrebbe causare è importante).
Successivamente, daremo alla nostra pagina uno sfondo gradiente gradevole:
html width: 100%; altezza: 100%; background-color: #FFFFFF; background-image: -moz-linear-gradient (in alto, #FFFFFF, # b3b3b3); background-image: -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, color-stop (0, #FFFFFF), color-stop (1, # b3b3b3)); filter: progid: DXImageTransform.Microsoft.gradient (startColorStr = '# FFFFFF', EndColorStr = "# b3b3b3"); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorStr = '# FFFFFF', EndColorStr =" # b3b3b3 ")";
Il immagine di sfondo il codice include i prefissi del venditore Mozilla e WebKit. Nel caso in cui si desideri che una versione della presentazione funzioni con Internet Explorer, il filtro e -ms-filtro creerà un gradiente in IE6, 7 e 8. (Ho generato questo codice sul sito utile www.css3please.com).
Ora aggiungiamo del codice per il nostro contenitore, Presentazione, e scatola:
Nostro contenitore avrà una larghezza di 960px ed essere centrato con margine: 0 auto. Il Presentazione div sarà 900px largo, centrato e spinto verso il basso 50px dalla parte superiore della pagina. Lo stiamo anche dando 50px di imbottitura in alto. Questa area di imbottitura conterrà i nostri pulsanti di presentazione, il elementi, una volta che li posizioniamo.
L'elemento che contiene effettivamente la nostra presentazione, scatola, è impostato alla stessa dimensione delle nostre immagini. È anche importante impostare posizione a parente come posizioneremo in modo assoluto alcuni dei suoi figli. L'altro nostro s sono impostati su display: in linea, ma scatola deve essere un elemento di blocco.
Ora, imposta i seguenti stili per le nostre sei immagini:
#box img position: absolute; inizio: 0; a sinistra: 0;
Posizioniamo le nostre immagini in modo assoluto in modo che si impilino direttamente l'una sull'altra nell'angolo in alto a sinistra di scatola. (Di default, superiore e sinistra sono impostati su 0. È stato incluso per motivi di chiarezza.)
In questo momento, la nostra presentazione è la seguente:
Aggiungiamo un po 'di stile per il nostro pulsanti:
figcaption display: inline-block; larghezza: 70 px; altezza: 35px; sfondo: rgba (0,0,0,0,6); bordo: 1px solido rgba (0,0,0,0,7); -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; allineamento del testo: centro; altezza della linea: 35px; colore: #ffffff; text-shadow: 1px 1px 1px # 000000; cursore: puntatore; posizione: relativa; inizio: -50px; a sinistra: 150 px; margine: 0 30 px 0 0; -moz-transition: tutti gli 0.1s lineari; -o-transizione: tutti gli 0,1s lineari; -webkit-transition: tutti gli 0.1s lineari; transizione: tutti gli 0.1s lineari;
Il primo la sezione di questi stili è puramente estetica. Rende i pulsanti semitrasparenti e arrotondati e il testo centrato e ombreggiato. Cambia anche il cursore del mouse su un puntatore, in modo che gli utenti sappiano di poter fare clic.
Il secondo la sezione posiziona i nostri pulsanti sopra le immagini, li centra e li distanzia.
Assicurati di posizionare i pulsanti fuori dai confini dei sei elementi. In caso contrario, facendo clic sul pulsante verrà effettivamente registrato come un clic sul più interno invece di quello corrispondente a quel pulsante.
Il scorso bit di codice aggiunge transizioni. Questo perché stiamo per aggiungere uno stile al hover state:
figcaption: hover background: rgba (0,0,0,0,8);
I nostri pulsanti in stile dovrebbero apparire così:
Passaggio 3: la casella 3D
La prima cosa che dobbiamo fare è dire al browser che lavoreremo in uno spazio 3D. Lo facciamo usando il prospettiva proprietà su un elemento genitore. Applichiamo (con il prefisso del venditore WebKit) a Presentazione:
#slideshow width: 900px; margine: 50px auto 0 auto; imbottitura: 50px 0 0 0; -webkit-prospettiva: 800; / * attiva uno spazio 3D * /
Il valore della prospettiva determina quanti pixel il "visualizzatore" proviene dall'oggetto 3D. Più basso è il valore più esagerato è l'effetto 3D.
Abbiamo anche bisogno di preservare lo spazio 3D in tutti i nostri elementi figlio. Per fare ciò aggiungeremo la proprietà stile di trasformazione: preserve-3d a tutti i nostri S. (Di nuovo, useremo il prefisso del venditore WebKit.)
figura display: in linea; -webkit-transform-style: preserve-3d; / * mantiene lo spazio 3D * /
Bene, ora è il momento di trasformare le singole facce (le nostre sei immagini) per costruire una scatola 3D. Punteremo ogni immagine usando il nth-child () pseudoclass, ma dando a ciascuno Uno specifico ID funzionerebbe anche Assicurati di aggiungere questo codice sotto gli stili correnti nel foglio di stile.
Ok, ecco cosa sta succedendo: la prima immagine non viene ruotata affatto, ma è tradotta in avanti (verso lo spettatore) 200 pixel sul suo asse Z..
La seconda immagine viene ruotata in giro suo Asse X di 180 gradi in modo che sia rivolto lontano dallo spettatore. Viene quindi allontanato dall'osservatore 200 pixel sulla sua Asse Z.
Si noti che l'ordine delle trasformazioni è importante: la rotazione cambia l'origine dell'oggetto e quindi la traduzione avviene lungo un nuovo asse.
La nostra terza e quarta immagine sono ruotate ciascuna attorno al Asse X per affrontare su e giù, rispettivamente. Quindi entrambi sono tradotti 200 pixel lungo il loro nuovo Z..
Ricorda, la nostra scatola è 900px largo di 400px alto di 400px in profondità. I quattro lati (il 940px di 400px facce) deve essere 400 pixel distanti l'uno dall'altro. Ecco perché li traduciamo tutti 200 pixel in direzioni opposte. Le due estremità (il 400px di 400px facce) ci tradurremo 900 pixel distanti l'uno dall'altro.
La quinta e la sesta immagine sono attualmente sul lato sinistro di scatola e non centrato. Per questo motivo, la nostra quinta e sesta immagine riceve traduzioni diverse. Entrambi hanno la loro origine 200 pixel a destra dell'estremità sinistra di scatola. La quinta immagine deve essere ruotata -90 gradi attorno a Y a sinistra e poi tradotto 200 pixel lungo il suo nuovo Asse Z. Questo lo posiziona all'estremità sinistra del nostro oggetto 3D. La sesta immagine viene ruotata 90 gradi attorno a Y per affrontare a destra e poi tradotto 700 pixel lungo il suo nuovo Asse Z. Questo lo posiziona all'estremità destra del nostro oggetto 3D.
Il modo migliore per avere un'idea di ciò che abbiamo fatto è guardare l'attuale disposizione delle immagini. Se visualizzi in anteprima la presentazione in Safari, al momento vedrai questo:
Nascondiamo la faccia anteriore - solo così possiamo vedere se le nostre altre immagini sono posizionate correttamente:
Ora possiamo vedere l'interno della nostra scatola:
Ora, rimuovere il display: nessuno dalla nostra prima immagine. Avrai notato che la scatola è più grande sullo schermo - più vicina allo spettatore - di quanto dovrebbe essere. La faccia frontale sembra particolarmente grande e allungata.
Per correggere questo dobbiamo spostare l'intero oggetto 3D lontano dal visualizzatore 200 pixel. Inserisci -webkit-transform: translateZ (-200px) agli stili per scatola. Mentre ci siamo, dovremmo aggiungere anche la proprietà di transizione:
#box position: relativo; blocco di visualizzazione; larghezza: 900 px; altezza: 400 px; -webkit-transform: translateZ (-200px); / * Rimette in posizione l'oggetto 3D * / -webkit-transition: -webkit-transform 1s; / * Abilita le transizioni per le trasformazioni * /
Con tutto questo, siamo pronti ad animare la nostra scatola.
Passaggio 4: animazione
Incolla nel nostro ultimo blocco di stile. Questo aggiungerà le nostre animazioni. Spiegherò in maggior dettaglio di seguito.
Quando ognuno di noi elementi riceve lo pseudoclass :messa a fuoco noi ruotiamo scatola per visualizzare il lato corretto. Si noti che il scatola le rotazioni sono l'opposto delle rotazioni che abbiamo usato su ogni singola faccia. Ad esempio, la quarta immagine è stata ruotata negativo 90 gradi intorno al Asse X. Per renderlo visibile dobbiamo ruotare l'intero oggetto 3D positivo90 gradi attorno a Asse X. Le traduzioni assicurano che il lato dell'oggetto 3D che stiamo visualizzando sia sempre alla giusta distanza.
Questo è tutto! Guarda la presentazione in Safari per accertarti che tutto funzioni correttamente.
CSS finale
Lo stile finale in style.css dovrebbe assomigliare a questo:
Probabilmente non c'è modo di giustificare l'utilizzo di un gruppo di nidificati s e elementi come pulsanti sotto le attuali raccomandazioni CSS3. Né questo esperimento rispetta la distinzione di HTML per il contenuto, CSS per lo stile e JS per il comportamento. E poiché queste trasformazioni funzionano attualmente solo in Safari, questa presentazione non è affatto pronta per essere effettivamente utilizzata nei progetti client. Ma lo scopo di questo esperimento è mostrare e spingere i limiti delle nuove funzionalità HTML5 e CSS3.
Se sei interessato ad adattare questa presentazione per i browser con minore supporto, ecco alcuni suggerimenti utili:
Usa Modernizr. Sul serio!
Solo Safari supporta le trasformazioni 3D ma è possibile creare una presentazione nifty utilizzando le trasformazioni 2D e supportare una gamma molto più ampia di browser.
Il opacità la proprietà farebbe una grande presentazione in dissolvenza e funzionerà in quasi tutti i browser. (Avresti bisogno filtro per IE).
Il i pulsanti si interromperanno in Firefox se sono posizionati in modo assoluto. È strano, lo so. Assicurati di usare il posizionamento relativo.
Spero che vi sia piaciuto questo tutorial. Non vedo l'ora di ricevere i tuoi commenti e ti ringrazio tanto per la lettura!
Share
Accentsconagua
