trasformazioni css3 con dojo
La specifica css3 – tuttora in lavorazione – prevede due proprietà molto interessanti: transform e transform-origin, che consentono di eseguire trasformazioni in due dimensioni quali rotazioni, scalature, inclinazioni e loro composizioni su un elemento della pagina.
Trovate qui http://www.w3.org/TR/css3-2d-transforms/ la lista delle trasformazioni disponibili nel dettaglio; la proprietà transform-origin si occupa di fissare il punto attorno a cui avviene la trasformazione.
Per semplicità ci concentreremo sulla rotazione.
Per esempio, volendo ruotare di 45 gradi attorno all’angolo in alto a sinistra e in senso orario il div che ha id=”bersaglio”, in un browser rispettoso dello standard dovremmo scrivere:
#bersaglio{
transform: 45deg;
transform-origin: 0 0; /* x y, si comporta come background-position */
}
Bello, no?
Ma quali browser supportano queste proprietà?
Beh, nessuno, ma… prima le buone notizie! 
Safari e tutti i browser che usano webkit le supportano come -webkit-transform e -webkit-transform-origin. Vale per safari dalla versione 3.1 e per tutti i chrome/chromium.
Quindi in questo caso avremmo:
#bersaglio{
-webkit-transform: 45deg;
-webkit-transform-origin: 0 0;
}
Vale anche per i browser di iphone, ipod touch e ipad, naturalmente.
Firefox a partire dalla versione 3.5 ha le proprietà -moz-transform e -moz-transform-origin, quindi il nostro esempio diventerebbe:
#bersaglio{
-webkit-transform: 45deg;
-webkit-transform-origin: 0 0;
-moz-transform: 45deg;
-moz-transform-origin: 0 0;
}
Opera dalla versione 10.50 ha le proprietà -o-transform e -o-transform-origin, quindi:
#bersaglio{
-webkit-transform: 45deg;
-webkit-transform-origin: 0 0;
-moz-transform: 45deg;
-moz-transform-origin: 0 0;
-o-transform: 45deg;
-o-transform-origin: 0 0;
}
Ho dimenticato qualcosa? Ah, sì, Internet Explorer.
Internet Explorer a oggi non ha le proprietà transform, quindi niente da fare.
Ok, ok, stavo scherzando.
Microsoft, a partire da Internet Explorer 5.5, fornisce un filtro Matrix, che è in grado di riprodurre le trasformazioni. Peccato che matrix voglia sei valori e il loro calcolo non è immediato; dovendo cambiare la rotazione da 45 a 30 gradi per esempio, dovremmo rifare tutti i conti, decisamente non è un approccio molto comodo.
Per fortuna esiste una via alternativa.
dojotoolkit alla riscossa
Esistono svariate librerie javascript che hanno caratteristiche diverse, ma in comune hanno il compito di mascherare le incoerenze dei vari browser in modo che chi sviluppa un’applicazione web complessa o desideri anche soltanto utilizzare delle animazioni, possa farlo ignorando i dettagli realizzativi.
Per esempio usando dojo, jQuery, YUI, Prototype o altro non abbiamo bisogno di sapere che Internet Explorer utilizza valori che vanno da 0 a 100 per l’opacity, mentre dovrebbero variare da 0 a 1: possiamo limitarci a dire alla libreria javascript che certi elementi dovranno avere una opacity pari a 0.5, e la libreria farà il lavoro sporco per noi.
Per quanto riguarda le trasformazioni css, la versione 1.5 di dojo (http://www.dojotoolkit.org), che dovrebbe uscire a breve, è in grado applicarle utilizzando una sintassi aderente allo standard, prendendosi carico delle differenze tra i browser.
Ecco che cosa dobbiamo fare, passo per passo:
scaricare la versione 1.5 “release” da qui http://www.dojotoolkit.org/download/ (sarà disponibile tra poco).
Decomprimere lo zip. Otterremo tre cartelle: dojo, la libreria di base; dijit i widget; e dojox, le estensioni.
Creiamo un file html e diamo un po’ di stile al nostro bersaglio:
#bersaglio{
text-align:center;
background: #999;
color:#ddd;
height:300px;
width:300px;
font:20px arial;
border:3px solid #aaa;
}
includiamo lo script dojo.js nell’head della pagina con:
<script type="text/javascript" src="dojo/dojo.js"></script>
Subito dopo, aggiungiamo questo script:
<script type="text/javascript">dojo.require("dojox.html.ext-dojo.style");
dojo.ready(function(){
dojo.style("bersaglio", {
"transform": "rotate(45deg)",
"transformOrigin": "0 0"
});
});
</script>
Si occupa di caricare la parte di dojox che gestisce le trasformazioni e di applicarla al nostro div una volta che la pagina è caricata (dojo.ready) et voilà, il gioco è fatto!
Se poi volete sbizzarrirvi e girare tutti i div presenti in pagina di 45 gradi, basterà scrivere al posto della dojo.style…, qualcosa come:
dojo.query("div").style({
"transform": "rotate(45deg)",
"transformOrigin": "0 0"
});
Ecco qui il risultato (tutto in una pagina per praticità di lettura):
http://www.nicolarizzo.com/gamesroom/iwd/rotate.html
Infine, qualora riusciste a mettere le mani sul sito del vostro peggior nemico:
dojo.query("body").style({
"transform": "scaleY(-1)"
});
semplicemente lo capovolgerà.
Naturalmente è possibile anche animare le trasformazioni, potrebbe essere l’argomento per un prossimo articolo.
Qua potete trovare un paio di demo:
http://archive.dojotoolkit.org/nightly/dojotoolkit/demos/css3/demo.html
http://www.nicolarizzo.com/gamesroom/dojoc/nic/demos/clock.html
Buon divertimento!
Add to Google
6 Commenti
che dire se non: GRAZIE! questo week end approfondisco
grazie a te per avermi fatto pubblicare!
La beta per fare i test è imminente, questione di pochi giorni: farò sapere quando è disponibile!
=O che effetti fantastici! Neanche ci fosse lo zampino di flash!!!
Fantastico!
E’ disponibile la 1.5 beta1 per cominciare a fare esperimenti
Ecco il link: http://download.dojotoolkit.org/release-1.5.0b1/dojo-release-1.5.0b1.zip
grazie della segnalazione nic! sono curiosa