Nello script #101 abbiamo dato un'occhiata alle trasformazioni fatte attraverso CSS3. Come detto, queste vengono fatte in maniera nativa dal browser, sfruttando l'hardware del computer.

Dopo aver analizzato la rotazione, oggi daremo un'occhiata allo scale: è la capacità di scalare la dimensione di un oggetto, applicando un effetto di scale.

Ecco un esempio:

.scale {
  -moz-transform: scale(1.5, 1.5);
  -ms-transform: scale(1.5, 1.5);
  -o-transform: scale(1.5, 1.5);
  -webkit-transform: scale(1.5, 1.5);
  transform: scale(1.5, 1.5);
}

Ed ecco il risultato:

In questo caso, andremo ad effettuare uno zoom di 1,5: tenendo i parametri per x e y sullo stesso valore, l'effetto sarà di fare uno zoom uniforme. Valori sotto l'1 rimpiccioliscono, superiori all'1 ne aumentano le dimensioni.

Grazie ai vendor prefix, il supporto è offerto da IE9+, Chrome 12+, Mozilla 3.5+, Safari 3.1+ e Opera 10.5+.