HTML and CSS Reference
In-Depth Information
Storicamente, una delle mancanze di HTML e CSS è sempre stata l'impossibilità di ese-
guire
trasformazioni
sugli elementi. Semplici trasformazioni come il ruotare un elemento
di 45 gradi o lo skew (un esempio di skew è la trasformazione da rettangolo a parallelepi-
pedo) erano impossibili da ottenere se non lavorando con immagini, elementi
div
, CSS,
JavaScript o con librerie JavaScript di terze parti.
Le specifiche di HTML e CSS contengono funzionalità che permettono di modificare
gli elementi applicando trasformazioni 2D, semplicemente con l'utilizzo di alcune proprie-
tà CSS.
Le proprietà CSS responsabili della trasformazione di un elemento sono
transform
e
transform-origin
. La prima indica il tipo di trasformazione che vogliamo effettuare,
mentre la seconda indica da quale punto dell'elemento vogliamo applicare la trasformazio-
ne. I tipi di trasformazioni sono predefiniti e sono elencati nella
tabella 5.3
(nell'ordine in
cui vengono applicati dal browser):
Proprietà
Descrizione
Specifica una trasformazione, fornendo i sei valori della matrice.
Questa è la modalità che offre più versatilità, ma è anche quella più
difficile da utilizzare, in quanto richiede conoscenze matematiche.
matrix
translate,
translateX,
translateY
Spostano l'elemento sull'asse orizzontale e/o verticale in base ai va-
lori forniti.
scale, sca-
leX, scaleY
Ridimensionano la larghezza e/o l'altezza dell'elemento.
rotate
Ruota l'elemento dei gradi specificati.
skewX,
skewY, skew
Specifica l'angolazione orizzontale e/o verticale dello skew di un
elemento.
Tabella 5.3
- Elenco delle trasformazioni CSS.
Di default, la proprietà
transform-origin
prende come punto di partenza della tra-
sformazione il centro dell'elemento. Volendo, possiamo modificarla specificando il punto
