Share
Ci sono alcuni esempi sorprendenti di trasformazioni e transizioni CSS, e anche se potresti essere spazzato via da loro, ci sono buone probabilità che tu sia travolto e un po 'intimidito! Questo tutorial ti riporterà alle basi. Creeremo alcuni fondamentali movimenti di transizione CSS3, passo dopo passo.
Il supporto attraverso i browser è già abbastanza ragionevole. Firefox 3.5, Chrome, Opera 10.5, Safari 3.1 e Internet Explorer 9.0 hanno coperto le trasformazioni. IE è un po 'meno accomodante per quanto riguarda le transizioni, sebbene sia previsto un supporto per IE10.
Per facilitare la comprensione del movimento, lavoreremo su una griglia di assi (che probabilmente riconoscerai dalla matematica di base). Useremo X e y coordinate per spostare i nostri oggetti.
L'unica differenza (cruciale) è che sul nostro asse il valore -y è sopra l'asse x, mentre normalmente sarebbe sotto di esso. Perché? Bene, HTML e CSS (insieme ad altre tecnologie web come ActionScript) usano un rovesciato Sistema di coordinate cartesiane perché le pagine Web iniziano da in alto a sinistra e leggono verso il basso. Quindi ora sai :)
Nota: Presumo che tu abbia già familiarità con la struttura dei file HTML e CSS. Vado a saltare spiegando come impostare il file CSS, posizionando le immagini e lo stile dell'Asse. Il nostro focus sarà sull'animazione degli oggetti. Se non sei sicuro che le tue competenze HTML + CSS siano all'altezza, dai un'occhiata al nuovo Tuts + Premium HTML e CSS in 30 giorni (che è gratuito) e imparerai tutto ciò che devi sapere.
Il primo movimento che dimostreremo è "orizzontale"; animeremo l'oggetto per spostarci a destra e a sinistra.
Per spostare un oggetto dalla sua posizione iniziale usiamo: transform: translate (x, y);, dove il valore x deve essere positivo e il valore y deve essere 0 per spostare l'oggetto a destra.
Apri il tuo editor di testo preferito e inserisci il seguente markup html, quindi salva il file.
Abbiamo assegnato tre classi all'immagine:
In primo luogo, posizioneremo l'oggetto (la nostra immagine van) al centro della griglia.
.oggetto posizione: assoluto; .van top: 45%; a sinistra: 44%;
In questo esempio sposteremo l'oggetto 350px a destra. La sintassi è transform: translate (350px, 0); e l'oggetto si muoverà quando l'Asse viene spostato sopra. Pertanto, dichiariamo con #axis: hover .move-right.
#axis: hover .move-right transform: translate (350px, 0); -webkit-transform: translate (350px, 0); / ** Chrome e Safari ** / -o-transform: translate (350px, 0); / ** Opera ** / -moz-transform: translate (350px, 0); / ** Firefox ** /
La proprietà di trasformazione CSS sposta solo l'oggetto da un punto a un altro, non si anima tra i due stati. Per fare ciò è necessario aggiungere una proprietà di transizione nella classe .object.
.oggetto posizione: assoluto; transizione: tutti i 2s easy-in-out; -webkit-transition: tutti i 2s easy-in-out; / ** Chrome e Safari ** / -moz-transition: tutti i 2s easy-in-out; / ** Firefox ** / -o-transition: tutti i 2s easy-in-out; /** Musica lirica **/
Questa regola di transizione dirà al browser di animare tutti proprietà allegate all'oggetto per 2 secondi usando un facilità in-out funzione di temporizzazione (interpolazione), senza ritardo.
Possiamo usare 6 tipi di funzioni temporali di transizione:
Per spostare un oggetto a sinistra abbiamo semplicemente bisogno di inserire un valore negativo nel X coordinare, mentre il y la coordinata dovrebbe rimanere 0. In questo esempio sposteremo l'oggetto -350px a sinistra.
Crea un altro file HTML e inserisci il seguente markup.
Questa volta usiamo il muovere a sinistra classe per impostare la regola css per spostare l'oggetto a sinistra.
Quindi, inseriamo -350px come coordinata x. transform: translate (-350px, 0); per spostare l'oggetto a sinistra. Abbastanza facile, giusto?
#axis: hover .move-left transform: translate (-350px, 0); -webkit-transform: translate (-350px, 0); / ** Safari e Chrome ** / -o-transform: translate (-350px, 0); / ** Opera ** / -moz-transform: translate (-350px, 0); / ** Firefox ** /
Poiché in precedenza abbiamo impostato la regola di transizione nella nostra classe .object, non è necessario impostarla di nuovo.
Spostare un oggetto verticalmente è abbastanza semplice, quasi identico allo spostamento orizzontale. L'unica differenza è che useremo il valore -y per spostare l'oggetto verso l'alto e il valore y per spostarci verso il basso.
Il codice HTML è identico ai due esempi precedenti. Tuttavia, stiamo sostituendo l'oggetto con un razzo (a scopo illustrativo), e la classe che usiamo per il nostro movimento verso l'alto è andare avanti.
Come con il nostro furgone, posizioneremo il razzo al centro della griglia:
.razzo top: 43%; a sinistra: 44%;
Come abbiamo detto prima, la coordinata y dovrebbe essere negativa, al fine di spostare il razzo verso l'alto. in questo caso lo spostiamo di 350px in su.
#axis: hover .move-up transform: translate (0, -350px); -webkit-transform: translate (0, -350px); -o-transform: translate (0, -350px); -moz-transform: translate (0, -350px);
Il metodo per spostare un oggetto verso il basso è (sorpresa, sorpresa) l'opposto di spostarsi verso l'alto; il valore della coordinata y dovrebbe essere positivo e la coordinata x dovrebbe rimanere 0. La sintassi è transform: translate (0, y);
In questo esempio, mostreremo il movimento verso il basso usando una moneta. Genio!
#axis: hover .move-down transform: translate (0,350px); -webkit-transform: translate (0,350px); -o-transform: translate (0,350px); -moz-transform: translate (0,350px);
Per creare una transizione diagonale, combineremo i valori di entrambe le coordinate X e y. La sintassi dovrebbe essere transform: translate (x, y). A seconda della direzione, il valore di X e y potrebbe essere negativo o positivo.
E per dimostrare il nostro movimento diagonale, useremo un piano di carta.
Dirigeremo il movimento verso nord-est. Per il X valore di coordinata inseriamo un valore positivo (350px) e per il y coordinate entriamo in un valore negativo (-350px). La sintassi sarà quindi simile a questa: transform: translate (350px, -350px);
#axis: hover .move-ne transform: translate (350px, -350px); -webkit-transform: translate (350px, -350px); -o-transform: translate (350px, -350px); -moz-transform: translate (350px, -350px);
Sentiti libero di sperimentare e dirigere il movimento degli oggetti lungo gli altri assi diagonali.
Il movimento rotazionale in CSS3 è regolato usando una coordinata radiale da 0 ° a 360 °. Per ruotare un oggetto è sufficiente applicare la seguente proprietà css: transform: ruotare (ndeg); dove n è il grado di rotazione.
Per ruotare un oggetto in senso orario, inseriamo un valore positivo per rotate (ndeg) proprietà.
Per questo esempio useremo una matita per dimostrare il movimento.
E ruoteremo l'oggetto di 360 gradi in senso orario.
#axis: hover .rotate360cw transform: ruotare (360 gradi); -webkit-transform: ruotare (360 gradi); -o-trasforma: ruota (360 gradi); -moz-transform: ruotare (360 gradi);
Per eseguire la rotazione in senso antiorario inseriamo (avete indovinato) un valore negativo.
Stiamo ancora usando la matita come oggetto, ma cambieremo la sua classe in .rotate360ccw.
#axis: hover .rotate360ccw transform: ruotare (-360 gradi); -webkit-transform: ruotare (-360 gradi); -o-trasforma: ruota (-360 gradi); -moz-transform: ruotare (-360 gradi);
La scala è una caratteristica interessante nei CSS3. Usando la proprietà scale (n) o scale (x, y) possiamo ingrandire o ridurre un oggetto all'interno del nostro HTML. L'oggetto verrà ridimensionato in base al valore n / x, y, dove l'asse x è per la larghezza e l'asse y rappresenta l'altezza. Ad esempio, se entriamo in scala (2), l'oggetto verrà ridimensionato due volte (200% in più) lungo entrambi gli assi, dalla sua dimensione iniziale.
Diamo un'occhiata all'esempio qui sotto.
In questo esempio aumenteremo le dimensioni della macchina del 200%, dando l'illusione che l'auto si avvicini (si spera).
Ancora una volta, la marcatura HTML è appena cambiata, ma questa volta usiamo una macchina come oggetto.
#axis: hover .larger transform: scale (2); -webkit-transform: scale (2); -o-transform: scala (2); -moz-transform: scale (2);
Dopo aver giocato con movimenti e trasformazioni di base, ora proveremo a combinarne alcuni. Diamo un'occhiata.
Questa volta, utilizzeremo un boomerang per dimostrare l'animazione.
Il piano è di spostare il boomerang in diagonale, mentre si eseguono rotazioni allo stesso tempo. Per fare ciò, dobbiamo semplicemente elencare le trasformazioni, separate da spazi.
#axis: hover .multiple transform: translate (350px, -350px) ruota (360 gradi); -webkit-transform: translate (350px, -350px) ruota (360 gradi); -o-transform: translate (350px, -350px) ruota (360 gradi); -moz-transform: translate (350px, -350px) ruota (360 gradi);
Questi sono esempi di base e c'è un enorme margine per svilupparli ulteriormente! Ricorda: prendi in considerazione il supporto del browser quando usi le proprietà CSS3 e non impazzire con questi effetti: dovrebbero migliorare il tuo design, non affogarlo!
Per ulteriori spunti, guarda alcune delle fantastiche animazioni e effetti CSS3 su Envato Market. Ecco alcuni esempi:
Queste fantastiche, sottili e utili transizioni CSS3, dissolvenza e bagliore aiutano a estendere l'immobiliare di un sito web e ad utilizzare il tuo spazio in modo più efficace. Tutti i contenuti, inclusi video, mappe, immagini, ecc., Possono essere tutti capovolti (o sbiaditi).
Friendly Flip 'n' Fade su Envato MarketQuesta è un'utilità basata su CSS / jQuery che ti consente di creare un insolito effetto di sfondo del cielo notturno animato per il tuo sito web.
Sfondo animato del cielo notturno sul mercato EnvatoQuesto è un kit di Pure CSS3 Loader Animations. Questi 15+ effetti di animazione CSS3 sono compatibili con tutti i principali browser.
Pure animazioni del caricatore CSS3 sul mercato EnvatoQuesta è una raccolta di cinque sottotitoli animati animati solo da CSS. Questo kit offre alcuni grandi effetti e ti farà risparmiare un sacco di tempo quando crei siti web.
tFigura - Didascalie immagine sul mercato EnvatoQuesto elemento ti consente di creare la tua griglia di mosaico con i tuoi social media per lo staff e altro. Include 28 icone social e una gamma di diverse configurazioni di griglia.
Social Mosaic Wall sul mercato Envato
Accentsconagua
