CSS3

CSS3 Trasformazioni e
Animazioni
salvatore.paone@gmail.com

Funzioni di trasformazione
Applicare uno più trasformazioni a un
elemento significa intervenire sulle coordinate
che ne determinano il posizionamento. Si
utilizza la proprietà transform che grazie alle
funzioni rotate, skew, scale e translate
possono apportare effetti dinamici di notevole
impatto visivo senza l'utilizzo di JavaScript.

Funzioni di trasformazione
Come sempre il supporto di tali proprietà.
relative al modulo delle trasformazioni, ad
oggi, deve ancora fare largo uso dei prefissi
proprietari dei principali browser.

Estensione Supporto
transform GC2+, FF3.5+, O10+, S3.1+, IE9

transform-origin GC5+, FF3.5+, O10+, S3.1+, IE9

Funzioni di trasformazione | rotate
rotate()ruota l'elemento in senso orario per il numero
di gradi specificati, valori negativi indicano una rotazione
in senso antiorario. Un valori pari a 360 lascia l'elemento
invariato, valori superiori vengono consentiti. Esempio 1:
/* rotazione in senso orario di 10 gradi */
#family {
-ms-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
}

Esempio 2:

/* rotazione in senso antiorario di 15 gradi
*/
#street {
-ms-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
transform: rotate(-15deg);
}

Esempio 3:

/* rotazione in senso orario di 20 gradi */
#load {
-ms-transform: rotate(380deg);
-moz-transform: rotate(380deg);
-webkit-transform: rotate(380deg);
-o-transform: rotate(380deg);
transform: rotate(380deg);
}


Vediamo un esempio con HTML5 e CSS3

Funzioni di trasformazione | scale
scale()modifica la dimensione dell'elemento, accetta
uno o due argomenti: se il secondo non è specificato sarà
considerato identico al primo. Il primo valore esprime una
variazioni di larghezza, il secondo esprime la variazione
dell'altezza. I valori sono espressi senza unità di misura.
transform: scale(0.7);

Esempio 1: In questo caso si è optato per un valore
positivo minore di 1, ciò produce una riduzione della
dimensione dell'elemento.
#man-sky {
-ms-transform: scale(0.7);
-moz-transform: scale(0.7);
-webkit-transform: scale(0.7);
-o-transform: scale(0.7);
}

positivo maggiore di 1, ciò produce un aumento della
dimensione dell'elemento.
#monuments {
-ms-transform: scale(1.3);
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
-o-transform: scale(1.3);
}

negativo producendo il capovolgimento dell'elemento:

#monument2 {
-ms-transform: scale(-0.6);
-moz-transform: scale(-0.6);
-webkit-transform: scale(-0.6);
-o-transform: scale(-0.6);
transform: scale(-0.6);
}

Negli esempi abbiamo sempre usato la funzione scale()
impiegando un unico valore e ciò ha permesso di variare
le dimensioni dell'elemento mantenendone le proporzioni.
Con le funzioni scalex() e scaley()invece si
introducono distorsioni nella proporzione.
#man-sky {
-ms-transform: scalex(0.7);
-moz-transform: scalex(0.7);
-webkit-transform: scalex(0.7);
-o-transform: scalex(0.7);
transform: scalex(0.7);
}

Funzioni di trasformazione | skew
skew()produce l'inclinazione dell'elemento trasfor-
mandolo in un rombo, anche qui possiamo avere due
valori, il secondo opzionale. Esempio 1:
div {
padding: 3px;
width: 300px;
-ms-transform: skew(10deg,20deg);
-moz-transform: skew(10deg,20deg);
-webkit-transform: skew(10deg,20deg);
-o-transform: skew(10deg,20deg);
transform: skew(10deg,20deg);
}

Con le funzioni skewX() e skeveY()invece applicano
la distorsione solo su uno dei due assi.
Esempio 2:
#test1 {
-ms-transform: skewX(15deg);
-moz-transform: skewX(15deg);
-moz-transform: skewX(15deg);
-webkit-transform: skewX(15deg);
-o-transform: sskewX(15deg);
transform: skewX(15deg);
}

Esempio 3:
#test2 {
-ms-transform: skewY(15deg);
-moz-transform: skewY(15deg);
-webkit-transform: skewY(15deg);
-o-transform: skewY(15deg);
transform: skewY(15deg);
}

Funzioni di trasformazione |
translate
translate()consente di spostare l'elemento di un
numero di pixel definito sia rispetto all'asse x e y. Mentre
le funzioni translateX() e translateY()invece
agiscono ripettivamente solo sulla X o Y. Esempio 1:
#test2 {
-ms-transform: translate(300px,200px);
-moz-transform: translate(300px,200px);
-webkit-transform: translate(300px,
200px);
-o-transform: translate(300px,200px);
transform: translate(300px,200px);
}

translate


transform-origin
Tutte le trasformazioni viste fino ad ora usano
implicitamente il centro dell'elemento, ciò
perché la proprietà transform-origin
ha come valore predefinito (50%, 50%). Il
primo valore si riferisce al piano orizzontale
orizzontale, il secondo al piano orizzontale; se
non fosse presente sarebbe utilizzato il valore
predefinito 50%.

transform-origin
-ms-transform-origin: 100% 0%;
-moz-transform-origin: 100% 0%;
-webkit-transform-origin: 100% 0%;
-o-transform-origin: 100% 0%;
transform-origin: 100% 0%;
Questo listato identifica come origine della
trasformazione l'angolo posto in alto a destra e in questo
caso l'eventuale rotazione farebbe perno non attorno al
centro ma su suddetto angolo alto a destra. La proprietà
può essere espressa anche con valori assoluti p.e.
transform-origin: 100em 0em;o parole chiave:
transform-origin: bottom right;

Trasformazioni multiple
Tutte le trasformazioni viste sono state prese
singolarmente, ma p possibile creare delle sequenze il cui
risultato finale sarà dato dalla somma degli effetti
prodotti dalle singole funzioni di trasformazione. Potremo
dunque scrivere:
transform: rotate(20deg) translate(100px,
50px) scale(1.2, 1.2);
per avere un elemento ruotato di 20 gradi, spostato di
100px a destra e di 50px in basso e un fattore di
ridimensionamento di 1.2. Non essendo menzionato il
tutto avverrà con un transform-origin centrato
all'elemento.

Trasformazioni e Animazioni
Le trasformazioni e le animazioni ottenute unicamente
tramite i CSS3 sono probabilmente la novità più
interessante i nquanto consente di ottenere con i soli fogli
di stile effetti grafici di grande impatto. La modifica
immediata di del valore di una proprietà viene espressa
nel seguente modo:
p {background-color: #efefef;}
p:hover {background-color: #bbbbbb;}
l'effetto roll-over ottenuto e immediato e privo di
transizioni ma con l'aggiunta di una transizione questo
diverrà graduale.

Trasformazioni con transizioni
/* proprietà interpretate solo da Chrome e
Safari */
-webkit-transition-property: background-
color;
-webkit-transition-duration: 3s;
/* Le proprietà ufficiali come definite
nella specifica. È buona norma inserirle
sempre, inoltre si avrà cura di aggiungerle
solo dopo l’elenco delle proprietà con
prefissi proprietari */
transition-property: background-color;
transition-duration: 3s;

Animazioni
Anche qui il supporto è garantito solo con l'utilizzo delle
estensioni proprietarie ma il risultato è estremamente
interessante richiedendo valori specifici per le proprietà
oggetto dell'animazione. Per raggiungere un controllo di
alto livello sulla modalità di svolgimento di una
animazione si ricorre alla regola: @keyframes
@keyframes
<identificativo_univoco_animazione> {
percentuale {
/* una o più dichiarazioni css */
}
}

Animazioni
@keyframes cinquecolori {
0% {color: #3b86ca;}
30% {color: #337fab;}
60% {color: #3b778c;}
90% {color: #67696b;}
100% {color: #8e584b;}
}
Ogni regola definisce una sorta di linea temporale lunga la
quale si snodano cinque diversi set di dichiarazioni.

CSS3

More Related Content

Similar to CSS3

More from Salvatore Paone

CSS3