CSS3 ed effetti speciali: rotazione, spostamento, scala ed animazione.

Pubblicato il 31/07/2015

I CSS3 hanno una potenza insospettabile: è praticamente possibile manipolare qualsiasi oggetto, in special modo in associazione con javascript, a seconda delle necessità.

Prima di vedere qualche esempio son necessarie delle doverose premesse:

• ciò che leggerete oggi deve essere una spunto, un'idea, un suggerimento. Non usatelo in produzione copincollandolo, poiché son incompleti, in special modo riguardo la retrocompatibilità.
• a volte ci sono metodi più leggeri, efficaci e flessibili. Lo vedremo in special modo in uno dei prossimi articolo. La cosa corretta, sempre, da fare è scegliere il giusto strumento per il lavoro in oggetto. Per usare una metafora: sì, puoi usare uno scuolabus privato per portare tuo figlio a scuola; no, non è una scelta corretta a meno che tu non abbia 15 figli
• gli esempi funzioneranno di sicuro con le nuove versioni di Chrome, Safari e Firefox. Se non notate nulla, provate uno di questi browser e ringraziatemi del consiglio!
• tutti gli esempi funzionano passando il mouse sulle immagini

Tutto ciò premesso, oggi vedremo assieme alcuni effetti basici dei CSS3: le cosiddette

 

Trasformazioni 2D

Tali effetti permettono di manipolare ogni oggetto (o gruppo di oggetti) nelle vostre pagine html con la regola: transform:_NOME_TRASFORMAZIONE_ .

Essi sono in linea di massima 4

1. Rotazione (rotate)
2. Ridimensionamento (scale)
3. Spostamento (translate)
4. Distorsione (skew)

ognuno dei quali poi può avere *sotto-effetti*, quali, ad esempio, rotazioni sui 3 assi, distorsione su uno o più lati, etc etc; possono essere mescolati tra loro e possono esser utilizzati in animazioni più o meno complessi: probabilmente scriverò un articolo a riguardo, a breve :)

Come sempre, una immagine vale più di mille parole: vedremo questi effetti quindi nella pratica

 

CSS3: rotazione

Con i CSS3 è possibile ruotare qualunque oggetto o gruppo di oggetti di un qualunque angolo, con la semplice regola:

.blocco {
	transform:rotate(XXXdeg);
}

dove XXX è l'angolo desiderato.

Vediamo un esempio pratico con il seguente codice html:

.blk {
	width:300px;
	height:200px;
	margin:50px;
	background:orange;
	overflow:hidden;
	position:relative;
}
	.blk img {
		display:block;
		width:300px;
		height:200px;
		position:absolute;
		top:0;
		left:0;
		z-index:100;
	}
#blk_0 img:hover {
	transform:rotate(180deg);
}

Vi faccio innanzitutto notare le prime due regole, che saranno comuni a tutti gli altri esempi che faremo:
il blocco principale ha dimensioni di 300x200 pixel (come l'immagine che vi è contenuta), ha uno sfondo, ha posizione relativa, mentre l'immagine la ha assoluta ed è ancorata nell'angolo alto e destro, e infine, ha overflow:hidden, per evitare che, quando l'immagine, durante la manipolazione, si ingrandisca, non copra gli altri elementi della pagina.
Sono regole per questo esempio: voi potete fare in base alle vostre esigenze, ovviamente

 

CSS3: ridimensionamento

Dopo la rotazione, il ridimensionamento è forse l'effetto di translazione più usato.
Partiamo anche qui con il codice:

#blk_1 img:hover {
	transform:scale(2,2);
}

L'effetto dell'hover consiste nel raddoppiare le dimensioni, per entrambi i lati, dell'immagine. Ovviamente, se si utilizzano valori minori di 1, si possono anche ridimensionare, o mescolare questi effetti, ad esempio utilizzando scale(2,0.5) per raddoppiare un lato e dimezzare l'altro.

 

CSS3: spostamento

L'effetto in oggetto consente si spostare il blocco di X,Y pixel verso destra e in basso. Se si utilizzano valori negativi gli spostamenti saranno verso l'alto/sinistra.
Tale effetto è abbastanza inutile senza le iterazioni (click ed hover): nell'esempio lo utilizzeremo per spostare l'immagine verso l'alto permettendo di mostrare in contenuto *sotto* l'immagine

#blk_2 img:hover {
	transform:translate(0,-50px);
}

 

CSS3: distorsione

Vi confesso un segreto: non mi viene in mente un esempio pratico per tale effetto. Se ne avete indicateli per favore nei commenti...

BTW per amore di completezza li mostriamo:

#blk_3 img:hover {
	transform:skewX(10deg);
}
#blk_4 img:hover {
	transform:skewY(10deg);
}
#blk_5 img:hover {
	transform:skew(10deg,10deg);
}

L'effetto è utilizzabile, come da esempi, sul solo asse X, sul solo asse Y o su entrambi gli assi

 

Considerazione finale

Come avrete notato l'effetto è *immediato*, quasi *istantaneo*. E se ciò può andar bene per translazioni statiche (come ad esempio l'inserimento di un blocco ruotato [vedi questo articolo sugli angoli ruotati a 45 gradi per capirci meglio], per le interazioni può non piacere

La cosa migliore, secondo me, è utilizzare tali effetti con le animazioni dei CSS3

Ne parleremo in dettaglio in un articolo futuro, intanto vi posto un esempio sul ridimensionamento di sopra, per vedere di nascosto l'effetto che fa® :P

@keyframes scalaImmagine {
    from {transform:scale(1,1);}
    to {transform:scale(2,2);}
}
#blk_6 img:hover {
	animation-name:scalaImmagine;
	transform:scale(2,2);
	animation-duration:1.2s;
}

Meglio, non siete d'accordo?

 

Compatibilità

ll codice inserito è abbastanza grezzo, in particolare non tiene conto dei problemi di retro-compatibilità. In questo articolo potete approfondire la questione della compatibilità multibrowser degli effetti CSS, e in particolare di quello di rotazione.