Corso HTML e CSS (29^ lezione): CSS: Trasformazioni

Impariamo a costruire un sito Web

Lezione 29: CSS: Le ultime proprietà.

Ci restano da vedere le proprietà relative a:

– Trasformazioni (CSS3, ma supportate con specifiche varianti)

– Animazioni (CSS3, non supportate da IE)

– Transizioni (CSS3, non supportate da IE)


transform

Applica una transformazione 2D o 3D ad un elemento.
Con questa proprietà è possibile trasformare un elemento spostandolo, ruotandolo, variandone le dimensioni ecc.

Non è supportata in alcun browser così com’è.

Microsoft supporta l’alternativa ms-transform
Firefox supporta l’alternativa: -moz-transform
Safari e Chrome supportano l’alternativa: -webkit-transform
Opera supporta l’alternativa -o-transform
Per questo motivo, se usiamo questa proprietà, nel CSS andranno sempre scritte tutte e quattro le varianti non sapendo quale browser il nostro lettore possa avere.

La trasformazione 3D non è supportata in alcun modo né in Internet Explorer né in Opera, per cui come sempre consigliamo di non re ciò che non è visibile nello stesso modo nei diversi tipi di browser. Questi effetti si possono ottenere con javascript piuttosto che con queste dichiarazioni.

I valori che possono essere assegnati a questa proprietà sono:

none Nessuna trasformazione.
matrix(n,n,n,n,n,n)

Definisce una trasformazione 2D ndo una matrice di 6 caratteri. Il significato e l’uso della matrice è talmente complesso che merita una trattazione separata e potrebbe quindi essere oggetto di un articolo dedicato nelle prossime settimane.
Diciamo solo che gli ultimi due numeri stanno ad indicare lo spostamento sull’asse delle x e delle y.

Facciamo solo un esempio:

Nel CSS scriviamo ad es.:
#box {
width:120px;
height:80px;
background-color:blue;
transform:matrix(0.6,0.8,-0.8,0.6,40,20);
-ms-transform:matrix(0.6,0.8,-0.8,0.6,40,20); /* IE 9 */
-moz-transform:matrix(0.6,0.8,-0.8,0.6,40,20); /* Firefox */
-webkit-transform:matrix(0.6,0.8,-0.8,0.6,40,20); /* Safari e Chrome */
-o-transform:matrix(0.6,0.8,-0.8,0.6,40,20); /* Opera */
}

Nel nostro foglio html la dichiarazione:
<div id="box">
</div>

produrrà il seguente output:

 

 

Nei casi in cui i diversi browsers supportino una versione proprietaria di una proprietà, ricordiamo che è sempre bene scrivere tutte le versioni nella dichiarazione CSS non conoscendo il browser che verrà to.
Potete fare delle prove variando i coefficienti e tenendo presente che i primi 4 influiscono sulla rotazione dell’oggetto e gli ultimi due sulla traslazione x e y.

matrix3d(n,n,n,n,n,n,n,n,n,
n,n,n,n,n,n,n
)
Come detto la trasformazione 3D non è supportata in alcun modo né in Internet Explorer né in Opera, per cui ne sconsigliamo l’uso.
translate(x,y)

Definisce uno spostamento sui due assi delle x e delle y.

Es. d’uso:
#box {
transform:translate(20px,10px);
}

Questa dichiarazione ha l’effetto di spostare il box di 20px a destra sull’asse delle x (orizzontale) e 10px in basso sull’asse delle y (verticale).

translate3D(x,y,z) Trasformazione 3D. Si consiglia di non re.
translateX(x) Spostamento sull’asse delle x. Per l’uso vedere quanto detto su translate(x,y).
translateY(t) Spostamento sull’asse delle y. Per l’uso vedere quanto detto su translate(x,y).
translateZ(z) Trasformazione 3D. Si consiglia di non re.
scale(x,y)

Riproporziona l’oggetto. Larghezza ed altezza vengono modificate secondo quanto indicato rispettivamente con x e y. Diversamente da translate in questo caso x e y sono moltiplicatori e cioè la nuova larghezza = larghezza attuale * x mentre la nuova altezza = altezza attuale * y.

Es.:
scale (1.5, 2) trasforma l’elemento con larghezza di una volta e mezzo quella attuale ed altezza del doppio di quella attuale.

scale3d(x,y,z) Trasformazione 3D. Si consiglia di non re.
scaleX(x) Come scale(x,y) con y=1 e cioè modifica solo la larghezza.
scaleY(y) Come scale(x,y) con x=1 e cioè modifica solo l’altezza.
scaleZ(z) Trasformazione 3D. Si consiglia di non re.
rotate(angolo)

Definisce una rotazione dell’elemento indicando l’angolo di rotazione. Valori positivi per rotazione oraria e valori negativi per rotazione antioraria. L’angolo è indicato con un numero di gradi seguito dal termine ‘deg’.

Es.:
#box {
transform:rotate(45deg);
}

rotate3d(x,y,z,angolo) Trasformazione 3D. Si consiglia di non re.
rotateX(angolo) Trasformazione 3D. Si consiglia di non re.
rotateY(angolo) Trasformazione 3D. Si consiglia di non re.
rotateZ(angolo) Trasformazione 3D. Si consiglia di non re.
skew(x-angolo,y-angolo)

Rotazione obliqua. La rotazione avviene sempre rispetto al punto centrale. L’elemento viene ruotato intorno all’asse delle x di x-angolo (in definitiva è come se l’asse delle y venisse ruotato in senso antiorario di x-angolo (vedi esempio qui sotto). Analogamente l’elemento verrà ruotato facendo perno sull’asse delle y di y-angolo, che equivale ad una rotazione piana dell’asse delle x di y-angolo in senso orario.

Se per es. dichiariamo:
transform:skew(30deg, 10deg);

si avrà una rotazione come in figura:

skewX(angolo) Come skew(x-angolo,y-angolo) dove si ruota solo la x.
skewY(angolo) Come skew(x-angolo,y-angolo) dove si ruota solo la y.
perspective(n) Trasformazione 3D. Si consiglia di non re.
transform-origin

Cambia la posizione iniziale dell’elemento da trasformare.
Va to esclusivamente insieme a transform.
Per le trasformazioni 3D accetta 3 valori (asse-x, asse-y, asse-z) ma noi considereremo solo l’uso relativo alle trasformazioni 2D per le quali i valori possono essere asse-x e asse-y oppure il solo valore relativo all’asse-x.
La sintassi è dunque:
transform-origin: asse-x asse-y;
dove asse-y può anche mancare. Entrambi i valori possono essere espressi in % o in valore oppure possono essere espressi con i termini:
left, center, right
per asse-x
e
top, center, bottom per asse-y.

L’origine per la trasformazione di un elemento è per default il suo punto centrale espresso come 50%, 50% oppure center, center.

Per fare un esempio, se dichiariamo:
transform-origin: left top;
significa che il punto centrale per la trasformazione che andremo a fare sarà il vertice alto a sinistra del contenitore del nostro elemento come in figura:

Per fare un altro esempio, se dichiariamo:

transform-origin: 25% 75%;
significa che il punto origine per la trasformazione sarà il 25% della larghezza del contenitore dal lato sinistro ed il 75% dell’altezza sotto il vertice alto come nella figura sotto:

Diamo ora l’elenco delle proprietà relative all’animazione. Sono proprietà introdotte col CSS3 e non supportate da tutti i browser. Sono quindi da evitare dati i problemi di compatibilità.

@keyframes Definisce il tipo di animazione.
Non è supportata da Internet Explorer.
Firefox supporta l’alternativa: @-moz-keyframes
Safari e Chrome supportano l’alternativa: @-webkit-keyframes
Opera supporta l’alternativa @-o-keyframes
animation ta per specificare con un’unica proprietà i valori delle sei proprietà:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
Non è supportata da Internet Explorer.
Firefox supporta l’alternativa: -moz-animation
Safari e Chrome supportano l’alternativa: -webkit-animation
Opera supporta l’alternativa -o-animation
animation-name Assegna un nome all’animazione specificata da @keyframes.
Non è supportata da Internet Explorer.
Firefox supporta l’alternativa: -moz-animation-name
Safari e Chrome supportano l’alternativa: -webkit-animation-name
Opera supporta l’alternativa -o-animation-name
animation-duration Stabilisce la durata in millisecondi dell’animazione.
Non è supportata da Internet Explorer.
Firefox supporta l’alternativa: -moz-animation-duration
Safari e Chrome supportano l’alternativa: -webkit-animation-duration
Opera supporta l’alternativa -o-animation-duration
animation-timing-function

Stabilisce la velocità dell’animazione.
Non è supportata da Internet Explorer.
Firefox supporta l’alternativa: -moz-animation-timing-function
Safari e Chrome supportano l’alternativa: -webkit-animation-timing-function
Opera supporta l’alternativa -o-animation -timing-function

animation-delay Specifica il ritardo con il quale deve essere avviata l’animazione.
Non è supportata da Internet Explorer.
Firefox supporta l’alternativa: -moz-animation-delay
Safari e Chrome supportano l’alternativa: -webkit-animation-delay
Opera supporta l’alternativa -o-animation-delay
animation-iteration-count Specifica quante volte l’animazione deve essere eseguita.
Non è supportata da Internet Explorer.
Firefox supporta l’alternativa: -moz-animation-iteration-count
Safari e Chrome supportano l’alternativa: -webkit-animation-iteration-count
Opera supporta l’alternativa -o-animation-iteration-count
animation-direction Specifica se l’animazione deve essere eseguita nel senso normale od in senso inverso oppure alternato.
Non è supportata da Internet Explorer.
Firefox supporta l’alternativa: -moz-animation-direction
Safari e Chrome supportano l’alternativa: -webkit-animation-direction
Opera supporta l’alternativa -o-animation-direction
animation-play-state Specifica se l’animazione deve essere funzionante od in pa.
Non è supportata da Internet Explorer.
Firefox supporta l’alternativa: -moz-animation-play-state
Safari e Chrome supportano l’alternativa: -webkit-animation-play-state
Opera supporta l’alternativa -o-animation-play-state

Chiudiamo questa panoramica sulle proprietà dichiarabili in un foglio CSS citando l’elenco delle proprietà relative alle transizioni. Anche queste proprietà non sono supportate da Internet Explorer e, di conseguenza, è bene evitare di rle utilizzando viceversa gli effetti di transizione che offre un linguaggio come Javascript.

transition ta per specificare con un’unica proprietà i valori delle quattro proprietà:
transition-property
transition-duration
transition-timing-function
transition-delay
Non è supportata da Internet Explorer.
Firefox supporta l’alternativa: -moz-transition
Safari e Chrome supportano l’alternativa: -webkit-transition
Opera supporta l’alternativa -o-transition
transition-property Assegna un nome alla transizione.
Non è supportata da Internet Explorer.
Firefox supporta l’alternativa: -moz-transition-property
Safari e Chrome supportano l’alternativa: -webkit-transition-property
Opera supporta l’alternativa -o-transition-property
transition-duration Stabilisce la durata in secondi o millisecondi della transizione.
Non è supportata da Internet Explorer.
Firefox supporta l’alternativa: -moz-transition-duration
Safari e Chrome supportano l’alternativa: -webkit-transition-duration
Opera supporta l’alternativa -o-transition-duration
transition-timing-function

Stabilisce la velocità della transizione.
Non è supportata da Internet Explorer.
Firefox supporta l’alternativa: -moz-transition-timing-function
Safari e Chrome supportano l’alternativa: -webkit-transition-timing-function
Opera supporta l’alternativa -o-transition -timing-function

transition-delay Specifica il ritardo con il quale deve essere avviata la transizione.
Non è supportata da Internet Explorer.
Firefox supporta l’alternativa: -moz-transition-delay
Safari e Chrome supportano l’alternativa: -webkit-transition-delay
Opera supporta l’alternativa -o-transition-delay

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *