Lez.20 - Corso Intermedio Css

TRANSITION | TRANSFORM

La Proprietà Transform

Quello che vedremo in questa lezione è come si possono animare delle immagini, come ad esempio al passaggio del mouse l'immagine si sposta o ruota.
Ma vediamolo subito in pratica.
Cominciamo con la proprietà transform e partiamo col dire che:
transform: rotate(-25deg); rotate (ruotare) significa di ruotare l'immagine di -25 gradi (degrees)

transform: scale(2.1,2.1); scale (scala) vuol significare che l'immagine si ingrandisce in scala sull'asse X per il primo valore, e sull'asse Y per il secondo valore

transform: translateX(100px); l'immagine si sposta sull'asse X di 100px

transform: translateY(100px); l'immagine si sposta sull'asse Y di 100px

transform: translate(100px, 100px); notazione semplificata l'immagine si sposta sull'asse X per il primo valore e sull'asse Y per il secondo valore

transform: skew(21deg); skew (storto) distorce di 21 gradi l'immagine.

Della proprietà transform si può usare la notazione semplificata in questa manera:
transform: translate(150px, 150px) rotate(25deg) scale(2.1, 2.1) skew(40deg);

La Proprietà Transition

Passiamo subito a vedere i suoi valori per avere delle belle animazinoni:
transition: 2s all; transition (transizione) è una trasformazione in movimento dolce non a scatti, si misura in secondi (nel nostro esempio: 2s) e all (tutte) significa su tutte le trasfomazioni che noi applicheremo.

La velocità con la quale avvengono le transizioni si chiama easing (facilitare) di cui possiamo definire diversi tipi di animazione.

Nel Css3 la transizione easing è di default ma se volessimo modificarla ci sono diversi valori:
linear (lineare)

ease (alleviare)

ease-in (facilita in)

ease-out (facilita out)

ease-in-out (facilita in e out)

Il Codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>La Proprietà Transition e la Proprietà Transform</title>
  <meta charset="utf-8">
  <style type="text/css">
	img {
		transition: 2s ease-out ;
		}
	img:hover {
		transform: rotate(380deg) translate(20px, 0px);
		}
	.jupiter {
		margin: 100px;
		transition: 1s ease-out ;
		}
	.jupiter:hover {
		transform: rotate(360deg);
		}
  </style>
 </head>
 <body>			    
	<img src="200X200px.jpg" alt="Scaffale vetrina">
	<img class="jupiter" src="jupiter_100x100px.jpg" alt="Immagine del Pianeta Giove">
 </body>               
</html>