Trasformazioni 2D

Attraverso l’utilizzo della libreria 2D transform, è possibile sfruttare le trasformazioni CSS3 (rotazione, ingrandimento, prospettiva ecc…) in tutti i browser. Questo script si appoggia infatti proprio ad esse per quanto riguarda i browser moderni, mentre nelle versioni di IE inferiori alla 9 vengono renderizzate attraverso l’uso del “filtro matrix”. Da sottolineare il pieno supporto e la piena compatibilità con le funzioni di animazione di base di jQuery, come la funzione animate().

Per scaricare jQuery 2d transform, info sul supporto browser e maggiori dettagli: https://github.com/heygrady/transform/

NOTA: In Internet Explorer 8 e precedenti, le funzioni “transform-origin” e “translate” vengono simulate utilizzando il posizionamento relativo. A causa di questo quindi, le proprietà top e left di un elemento saranno sbagliate dopo che esso sarà stato trasformato. La soluzione è quella di mettere un contenitore all’elemento da spostare e dichiarare la posizione corretta all’elemento contenitore.

Come utilizzare il plugin

Innanzitutto è bene distinguere tra animazione e trasformazione. In fase di utilizzo del plugin infatti si fa riferimento a trasformazioni per intendere spostamenti immediati, e quindi senza transizione, da uno stato dell’oggetto del DOM all’altro. Per animazione invece si intende, mediante l’utilizzo della funzione animate() di jQuery, la transizione progressiva da uno stato all’altro. In particolare quindi si possono utilizzare entrambi i metodi:

Esempio di trasformazione con rotazione di 45 gradi

$('.example').transform({rotate: 45}); //l'elemento viene ruotato di 45 gradi

Esempio di animazione con rotazione di 45 gradi

$('.example').animate({rotate: 45}); //l'oggetto ruota da 0 a 45 gradi gradualmente

Tipi di trasformazioni e transizioni supportate

matrix: [1, 0, 0, 1] //applica una matrice
reflect: true //come una rotazione (180°)
reflectX: true //riflessione sotto-sopra
reflectXY: true //come reflectX+ rotazione(-90°)
reflectY: true //speculare
rotate: ’45deg’ //rotazione 45°
skew: [’10deg’, ’10deg’] //distorsione di 10° sull’asse x e y
skewX: ’10deg’ //distorsione di 10° sull’asse x
skewY: ’10deg’ //distorsione di 10° sull’asse y
scale: [1.5, 1.5] //ingrandimento di 1.5 volte sull’asse x e y
scaleX: 1.5 //ingrandimento di 1.5 volte sull’asse x
scaleY: 1.5 //ingrandimento di 1.5 volte sull’asse y
translate: [’20px’, ’20px’] //trasla i 20px sull’asse x e y
translateX: ’20px’ //trasla i 20px sull’asse x
translateY: ’20px’ //trasla i 20px sull’asse y
origin: [’20px’, ’20px’]  //cambia l’origine della trasformazione

In questo modo, con semplici istruzioni gli oggetti delle nostre pagine web prenderanno magicamente vita! Non resta che provare no?