Ciao a tutti.
Oggi parleremo brevemente delle trasformazioni. Le
trasformazioni sono molto simili alle transizioni, in quanto forniscono un'altra
opzione per modificare l'aspetto degli elementi che si trovano sulla nostra pagina.
Così possiamo cambiare le cose sia nel modo bidimensionale che in
un modo tridimensionale come le persone stanno guardando il tuo sito.
Diamo un'occhiata ad alcune delle opzioni di trasformazione bidimensionale.
Parleremo di tradurre, ruotare, scalare,
inclinare e matrice, e di come ognuno di questi può funzionare all'interno del tuo CSS3.
La prima opzione che vi mostrerò è tradurre.
Quello che tradurre farà è che puoi dargli due valori, li ho chiamati x e
y e, a seconda di questi valori,
puoi spostare l'elemento a sinistra ea destra o su e giù.
Se x è positivo,
si sposta verso destra, se è negativo si sposta a sinistra.
Con y, se è positivo ti muovi verso il basso e se è negativo ti muovi verso l'alto.
Quindi diamo un'occhiata a un esempio reale per renderlo un po 'più chiaro.
Ecco, ho questo bel elemento blu.
E quello che sto per dire è che voglio tradurlo, 100 e 75.
Quindi ti aspetterai di vederlo muoversi a destra e giù un po'.
Quindi puoi vedere, ancora una volta, è difficile capire quando le cose vanno su e giù.
Ma se guardate i margini, abbiamo quasi effettivamente aumentato i margini.
L' opzione successiva è ruotare.
Quando ruoti qualcosa, stai ruotando, o
mi piace pensarlo come girare l'elemento, un certo numero di gradi.
Non vedi il giro.
Basta vedere il risultato o come sarebbe alla fine.
Quindi qui ho un altro elemento e gli dirò di ruotare di 30 gradi.
Quindi da qui, a qui.
Ora è molto importante ricordarsi di mettere il grado.
Se hai appena messo 30, molti dei browser non avranno quel lavoro.
Infatti, la maggior parte di loro non lo fara'.
Quindi assicurati di dargli i gradi che vuoi che giri, una specie di numero, 30,
90, 80, e poi usa il grado.
Quindi, parliamo di scala.
E la scala è solo un modo elegante di dire, rendiamolo più ampio o più alto.
Quindi di nuovo, gli dai due numeri, e
questo è quanto vuoi cambiare la larghezza e l'altezza di un elemento.
Quindi qui ho un blocco più piccolo, e
ho deciso che mi piacerebbe renderlo due volte più largo e tre volte più alto.
Ecco un nuovo elemento dopo la scala di trasformazione.
Skew è molto difficile per me spiegare cosa fa, ed è ancora più difficile
farlo perché dimentico sempre la mia sinistra e i miei diritti quando guardo la telecamera.
Quindi, ancora una volta, vorrai giocare con questo e
guardare alcuni degli esempi.
Quello che stai facendo è che stai ruotando l'elemento un certo numero di gradi attorno
all'angolo x e un certo numero di gradi attorno all'angolo y.
Quindi qui vi mostrerò un'inclinazione, 30 gradi per 15 gradi.
Cominci da qui e finisci per girare in una specie di strana angolazione.
E ancora una volta è molto difficile mostrarti questo quando sto fissando lo schermo, quindi
spero che lo scriverai e giocherai un po' con esso.
L' opzione successiva e finale è la matrice.
E quando si utilizza la matrice,
è possibile combinare tutti i metodi di trasformazione 2D in un unico comando alla volta.
Non lo uso mai, perché trovo troppo confuso ricordare
quale scala, quale ruota, quale è inclinata.
Quindi, a meno che non ti senta davvero fiducioso con il tuo CSS3, eviterei di
usare la matrice e andrei avanti e userei ciascuna delle altre trasformazioni individuali una alla volta.
Quindi gli altri di cui abbiamo appena parlato erano trasformazioni bidimensionali.
Possiamo anche fare trasformazioni tridimensionali, e
sono molto simili a quelle di cui abbiamo appena parlato.
Così per esempio con rotazione, ora invece di ruotare solo lungo l'
asse x o y, possiamo anche ruotare intorno alla dimensione z.
Quindi, se si desidera utilizzare una rotazione 3D, le opzioni ora sono trasformate: Rotatey
quanti gradi, RotatEx, RotaTeZ,
o si può effettivamente dire rotate3d e dargli numeri lungo ogni singola dimensione.
Uso raramente le dimensioni 3D.
Ma abbiamo le opzioni.
Abbiamo la rotazione, abbiamo la scala, e abbiamo il traduttore.
E possono davvero fare alcune cose davvero interessanti con come vuoi che i tuoi
elementi sembrino.
Quando arriva il momento di usare le trasformazioni, ci sono alcune cose a cui pensare.
In genere, quando usi le trasformazioni, le userai con modifiche di stato.
Se ricordi, ciò significa che potresti avere una trasformazione che si verifica quando esegui un passaggio al passaggio del
mouse, un a fuoco o un attivo.
Se stai davvero solo cercando di cambiare l'aspetto di un elemento fin
dall'inizio e lasciarlo in questo modo, potresti voler pensare solo a scattare foto
e scherzare con le immagini e fare le cose offline.
È più veloce e non consuma tanta larghezza di banda.
Tuttavia, è un modo interessante per giocare con le cose e
acquisire fiducia con il tuo CSS.
Naturalmente, con così tante cose che abbiamo imparato in questa classe, è importante
ricordare che spesso avrai bisogno di prefissi del browser per far funzionare le trasformazioni.
Quindi un altro strumento nella cintura degli attrezzi per
imparare a fare qualcosa di eccitante con la tua pagina.
So che non ho fatto il mio esempio normale qui, ma
il prossimo video mostrerà un esempio usando transizioni, trasformazioni e
alcune delle altre cose che abbiamo imparato fin dall'inizio.
Spero che darete un'occhiata e vi
sentirete un po' più sicuri di quello che abbiamo appena imparato con le trasformazioni.
Buona fortuna.