
guide
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Ruotare, traslare, inclinare e scalare oggetti con i CSS
Il modulo Transforms incluso nella specifica del CSS3 (http://www.w3.org/TR/css3-2d-transforms) consente di effettuare manipolazioni 2D sugli elementi contenuti nella pagina.
Il modello di formattazione visiva del CSS (http://www.w3.org/TR/REC-CSS2/visuren.html) descrive il sistema di coordinate con cui ogni elemento è posizionato nella pagina. Posizione e dimensione degli oggetti possono essere espresse in pixel partendo dall’angolo in alto a sinistra dell’elemento genitore procedendo verso destra e in basso.
Le coordinate nello spazio possono essere modificate attraverso la proprietà transform
con cui è possibile traslare, ruotare, inclinare o scalare gli elementi.
Il sistema di coordinate utilizzato dalla proprietà è lo stesso stabilito nella specifica SVG 1.1 (http://www.w3.org/TR/SVG/coords.html#EstablishingANewUserSpace). Tale sistema di coordinate è costituito da due assi: X che si estende orizzontalmente verso destra e Y che si estende verticalmente verso il basso (Figura 1).
È bene fare una precisazione sul supporto dei browser prima di procedere ulteriormente. Il supporto nella forma standard del modulo è pressochè nullo; ognuno dei browser, però, fornisce la propria alternativa consentendo quindi di estendere il supporto a tutte le ultime versioni. Ovviamente Internet Explorer non fornisce alcun tipo di supporto alla proprietà.
Le alternative dei vari browser sono, come di consueto, caratterizzate da un suffisso identificativo prima della proprietà.
Chi volesse estendere tali proprietà anche al browser di casa Microsoft, può utilizzare cssSandPaper, uno script Javascript che consente di integrare le proprietà di trasformazione anche al suddetto browser. Il funzionamento è semplicissimo, è sufficiente utilizzare una ulteriore proprietà nel CSS con il suffisso -sand-
.
Come detto nel paragrafo precedente, il modulo ci consente di effettuare delle trasformazioni su un oggetto presente nella pagina. Le trasformazioni possono anche essere combinate tra loro. È possibile, ad esempio, ruotare e scalare contemporaneamente un’immagine oppure inclinare e capovolgere un oggetto, etc.
Le proprietà messe a disposizione sono due, ovvero:
transform
con cui si specificano le trasformazioni da effettuare.transform-origin
con cui si specifica il punto di origine da cui avviene la trasformazione.La proprietà contiene la lista delle funzioni di trasformazione da effettuare sull’oggetto. Di default tale proprietà è settata su none
.
Un semplice esempio del suo utilizzo, che comprende anche le proprietà alternative dei vari browser, è il seguente:
#object {
...
transform: rotate(40deg); /* standard */
-moz-transform: rotate(40deg); /* firefox */
-webkit-transform: rotate(40deg); /* safari */
-o-transform: rotate(40deg); /* opera */
}
L’esempio è disponibile su questa pagina.
transform-origin
stabilisce il punto di origine della trasformazione. La proprietà richiede due valori, il primo riferito all’asse X e il secondo riferito all’asse Y. Inizialmente entrambi i valori hanno valore 50%, quindi si riferiscono al centro dell’oggetto. I valori possono essere espressi in percentuale, in una delle unità di misura dei CSS (px, em, etc.) oppure attraverso le keyword left, center, right per l’asse X e top, center, bottom per l’asse Y. Nel caso in cui si scelga l’ultima modalità e viene omesso uno dei due valori, esso di default corrisponderà a center.
Vediamo un classico esempio sull’utilizzo della proprietà:
#object {
...
transform: rotate(40deg); /* standard */
transform-origin: left bottom;
-moz-transform: rotate(40deg); /* firefox */
-moz-transform-origin: left bottom;
-webkit-transform: rotate(40deg); /* safari */
-webkit-transform-origin: left bottom;
-o-transform: rotate(40deg); /* opera */
-o-transform-origin: left bottom;
}
L’esempio è disponibile in questa semplice demo.
Abbiamo visto finora che è possibile trasformare un oggetto e definire il punto da cui effettuare tale trasformazione. Vediamo adesso quali sono le funzioni che la specifica mette a disposizione fornendo anche alcuni esempi esplicativi.
La funzione consente di effettuare una trasformazione in forma di matrice a sei valori come quella contenuta nella specifica SVG (http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined).
La funzione è espressa nella seguente forma:
matrix( a, b, c, d, tx, ty );
dove a, b, c, d
costruiscono la matrice e gli ultimi due indicano il valore di traslazione.
Un esempio pratico, disponibile anche su questa pagina, è il seguente:
#object {
...
transform: matrix(1, -0.2, 0, 1, 0, 0);
-moz-transform: matrix(1, -0.2, 0, 1, 0, 0);
-webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
-o-transform:matrix(1, -0.2, 0, 1, 0, 0);
}
I browser con motore grafico Gecko (Firefox) accettano valori espressi anche in unità di misura per tx
e ty
mentre i browser con motore Webkit (Safari, Chrome) e Opera accettano valori senza unità di misura.
La funzione consente di traslare l’oggetto in base al valore passato alla funzione. La funzione prende in ingresso uno o due valori che indicano rispettivamente l’asse X e l’asse Y. Se il secondo parametro non viene passato, la traslazione sull’asse Y assume valore zero.
Il seguente esempio effettua uno spostamento dell’oggetto di 10px su entrambi gli assi:
#object {
...
transform: translate(10px, 10px);
-moz-transform: translate(10px, 10px);
-webkit-transform: translate(10px, 10px);
-o-transform: translate(10px, 10px);
}
Le due funzioni sono del tutto simili all’esempio precedente con la sola differenza che prendono in ingresso un unico parametro riferito all’asse.
La funzione scale
consente di ridimensionare l’oggetto in base ai valori passati come parametri; se viene passato un solo parametro, esso viene assegnato ad entrambi gli assi.
Se il valore è maggiore di 1, la dimensione dell’oggetto verrà ingrandita mentre, se il valore è compreso tra 0 e 1, la dimensione verrà ridotta.
Il codice necessario è il seguente:
#object {
...
transform: scale(0.5);
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
-o-transform: scale(0.5);
}
Possiamo vedere “dal vivo” due esempi del suo utilizzo:
Esempio 1 – Ingrandimento dell’oggetto
Esempio 2 – Rimpicciolimento dell’oggetto
Come per la funzione Translate, anche queste funzioni consentono di ridimensionare l’oggetto solo su uno degli assi.
Probabilmente la funzione al momento più famosa, rotate
consente di ruotare l’oggetto in base al numero di gradi passati come parametro.
Un esempio è il seguente:
#object {
...
transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
}
È possibile vederlo all’opera su questa pagina.
La funzione distorce l’oggetto per un valore pari al numero di gradi passati come parametro. Se vengono passati due parametri l’inclinazione verrà effettuata su entrambi gli assi, altrimenti solo sull’asse X.
L’esempio seguente effettuerà un’inclinazione di 15 gradi sull’asse X e 20 gradi sull’asse Y. Lo stesso esempio è disponibile qui:
#object {
...
transform: skew(15deg, 20deg);
-moz-transform: skew(15deg, 20deg);
-webkit-transform: skew(15deg, 20deg);
-o-transform: skew(15deg, 20deg);
}
Come per le funzioni precedenti, anche in questo caso entrambe si riferiscono all’inclinazione di uno solo degli assi.
Come abbiamo detto ad inizio articolo, è possibile assegnare una lista di trasformazioni ad un oggetto. Quindi non una sola funzione per oggetto ma anche funzioni multiple.
Vediamo un semplicissimo esempio di funzioni multiple assegnate ad un contenitore.
transform: rotate(180deg) skew(20deg, 30deg) scale(2);
È possibile vedere il risultato dell’esempio in questa pagina.
Tutti gli esempi sono disponibili per il download.
Se vuoi aggiornamenti su Trasformazioni 2D con i CSS3 inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
Matteo Anelli presenta le caratteristiche principali di LibGDX, framework che permette di creare applicazioni mobile ibride sviluppando in Java
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Fare gli e-commerce developer con Magento, Prestashop e WooCommerce.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
Comunicazione tra sistemi distribuiti e grazie al WCF di Microsoft.
Terza parte della serie su interattività ed eventi in Javascript
E così GNOME sta velocemente approdando alla versione 2.4. In sei mesi di sviluppo il team del celebre ambiente grafico […]
La guida alle opzioni di base di HitFilm Express, il software per l’editing video con molte funzioni di stampo professionale.