Le trasformazioni sono leggere (per i browser) ma potenti (per l'occhio umano) cambiamenti per un oggetto.

Sono effetti visivi molto interesanti.

le proprietà di transform sono "rotate, scale, skew, translate", poi ci sono ancora le prorieta' 3D per i browser WEBKIT (safari 3+ e chrome 20+)

le trasformazoni 2d sono suportate da tutti i browser, a parte IE da partire della versione 9
le trasformazioni trovano luogo al centro del oggetto

facciamoli tutti una alla volta

rotate

girare l'oggetto di totali degrees (gradi)



nuovamente API sperimentali, quindi nuovamente prefissi.


scale








con questa proprieta, possiamo ingrandire l'oggetto. letteralmente scalarlo. anche in due assi diferenti.
valore 1: ingrandimento in larghezza
valore 2: ingrandimento in altezza

se viene definito solo un valore, il secondo valore equivale il primo



skew
sempre con uno o due valori in gradi possiamo inclinare l'oggetto desiderato






translate
sposta l'oggetto di TOT pixel o percentuale.
per esempio 100% significa sposta a destra quanto l'oggetto stesso e' largo
...

Read the whole post...

Quante volte volevamo creare un animazione fluida e bella da vedere? senza scrivere 30 righe in Javascript, per ottenere alla fine una transizione pesante e noiosa?

da oggi non c'e' più problema.
Cosa ne pensate della transizione in home? quella per passare da "standard" ad "avanzato"?

ci credete se vi dico che e' un codice che occupa una sola riga? le transizioni sono di nuove API sperimentali e hanno per questo bisogni di avere il prefisso per ogni browser. i Browser piu potenti come safari e chrome usano l'Hardware del Computer per ottenere un'animazione fluida che non rallenta la navigazione.

ci sono 2 modi per definire le transizioni

1) Metodo "lungo"


Analizziamo:
transition-property cosa deve venire (assume il valore delle proprieta')
transition-timing-function mette un disequilibrio nella velocita del animazione (ease-in, ease, ease-out, ease-in-ou, linear e poi c'e' cubic-bezier[molto complicato])
transition-delay attesa prima del animazione (assume valore numerico seguito da "s", esempio: 1s)
transition-duration quanto dura in totale l'animazione (assume sempre valore numerico seguito da una "s")

il codcie sarebbe piu o meno cosi.



Beh, non e' molto corto come codice, ma come ho fatto quindi a creare il codice in una riga?
facile, con la sintassi rapida.

In Css 3 ci sono tante novita, ma una delle piu interessanti e molto usata sono le sfumature o anche sonfdi gradienti. Niente piu sprechi di Tempo su Photoshop per creare la sfumatura giusta.

esistono due sintassi

1) solo webkit (vecchi browser)

risultato (con browser webkit, quindi chrome, safari, safari mobile e andoird browser)

Analiziamo

background-image:<b> come nel css2 dichiara uno sfondo
<b>-webkit-gradient invece di "none" viene dichiarato una gradienza
lienar le grazienze posso essere dritte oppure circle, quindi a cerchio
left top punto di partenza
left bottom punto fine (si puo fare anch eiun diagonale, lungo il div)
from da (equivale a color-stop(0, COLORE) ) con quale colore iniziare
color-stop aggiunge un colore nel punto desiderato
-0.5 punto desiderato 0=inizio 1=fine 0.5=metta 0.25=un qurto del percorso
-[colore]
to ultimo colore ( corrisponde a color-stop(1, COLRE) )

Gli altri browser?

2) tutti i piu' recenti
si, non possiamo lasciare gli altri browser.

tra l'altro questi hanno una sintassi piu semplice (vale anche per i browser webkit piu recenti)

Analiziamo

background-image uguale a prima
linear-gradient indica una sfonod gradiente linear
top punto di inizio automaticamente la sfumatura va al lato/angolo opposto)
black color
0 inizio (0%)
purple colore
50% metta'
yellow colore
100% fine

ogni browser ha un proprio prefisso perche sono API sperimentali, quindi
Webkit: Per chrome, safari, andoird, safari mobile, PSVita, PS3, Rock melt
Moz:(Geeko) firefox
O: Opera e Opera mini (alcune versioni)
MS(microsoft):Internet Explorer

quindi il codice completo sarebbe cosi: