Proprieta transform di CSS3 metodi e valori.

CSS3 trasformazione cambia le dimensioni, la forma e la posizione dell'elemento sulla  pagina web tramite proprietà transform. Trasformazione cambia  l'elemento senza influire sugli altri elementi della pagina web, vale a dire altri elementi non si muovono o spostano rispetto ad esso.

Per default, la trasformazione avviene rispetto il centro dell'elemento. Le trasformazioni non funzionano con elementi inline display: inline.

Ci sono due tipi di trasformazioni CSS3 - 2D e 3D. 2D-trasformazione trasformano elementi nello spazio bidimensionale.

2D trasformazione d'elemento.

1. Funzione del 2D-trasformazione transform

La proprietà specifica il tipo di cambiamento dell'elemento. La proprietà  descrive il tipo di trasformazione, spostamento dell'elemento dalla posizione corrente o cambiamento della sua forma e dimensioni originali. Non si eredita
I valori ammesibili:

matrix() — qualsiasi valore
translate(), translateX(), translateY() — unita di lungezza (valori positivi e negativi), %
scale(), scaleX(), scaleY() — qualsiasi cifra
rotate() — angolo (deg, grad, rad o turn)
skew(), skewX(), skewY() — angolo (deg, grad, rad)

Metodo Descrizione
none Il valore di default indica nessuna trasformazione. Annulla anche la trasformazione di un elemento nel gruppo di elementi soggetto di trasformazione.
matrix(a, c, b, d, x, y) Sposta elementi e specifica il modo della loro trasformazione, permettendo di combinare diverse funzioni di 2D trasformazioni in uno. Come la trasformazione sono ammissibili rotazione, scala, inclinazione e cambiamento di posizione
Valore a cambia la scala in orizzontale. Valore compreso fra 0 e 1 riduce l'elemento è maggiore di 1 – aumenta la sua grandezza.
Valorec deforma (sposta) i lati del elemento sull'asse Y, un valore positivo – in alto, negativo - verso il basso.
Valore b deforma (sposta) i lati del elemento sull'asse X valore positivo - a sinistra, negativo – a destra
Valore d cambia la scala in verticale. Un valore minore meno di 1 diminuisce l'elemento è maggiore di 1 - aumenta.
Valore x sposta elemento per asse X, positivo a destra, negativo a sinistra.
Valorey sposta elemento per asse Y, valore positivo — in basso, negativo in alto.
translate(x,y) Sposta elemento in una nuova posizione spostando rispetto alla posizione atuale verso destra e in basso, utilizzando le coordinate x ed y, senza influenzare le celle adiacenti. Se si desidera spostare l'oggetto verso sinistra o verso l'alto, si consiglia di utilizzare i valori negativi.
translateX(n) Sposta l'elemento rispetto alla sua posizione normale sull'asse X.
translateY(n) Sposta l'elemento rispetto alla sua posizione normale sull'asse Y.
scale(x,y) Scale elementi, rendendoli più o meno grandi. Valori tra 0 e 1 riducono l'elemento. Il primo valore scala per larghezza, secondo per altezza. I valori negativi trasformano elemento rispecchiandolo.
scaleX(n) La funzione scala dell'elemento per larghezza, rendendolo più largo o più stretto. Se il valore è maggiore di uno, elemento diventa più largo del originale se il valore è compreso tra uno e zero elemento si restringe. I valori negativi trasformano elemento rispecchiandolo sempre allargandolo o restringendolo secondo il valore assoluto
scaleY(n) La funzione scala l'elemento in altezza, rendendolo più alto o più basso. Se il valore è maggiore di uno, elemento diventa più alto se il valore è compreso tra zero e uno – piu basso. Valori negativi rispecchiano elemento in verticale.
rotate(angolo) Ruota elemento per un numero predeterminato di gradi, un valore negativo da -1deg a -360deg ruotata in senso antiorario, valori positivi in senso orario. Il valore di rotazione (720deg) ruota l'elemento per due giri completi.
skew(x-angolo,y-angolo) Si usa per deformazione (distorsione) delle parti all'elemento relativamente ad assi coordinati. Se si specifica solo un valore, il secondo viene determinato automaticamente dal browser.
skewX(angolo) Deforma parti dell'elemento rispetto all'asse X.
skewY(angolo) Deforma parti dell'elemento rispetto all'asse Y.
initial Imposta il valore della proprietà al suo valore di default..
inherit Eredita il valore della proprietà dal elemento genitore.

div {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg); 
transform: rotate(360deg);
}

Passa il mouse sopra i blocchi per vedere la funzione di trasformazione in atto.

CSS3 2D Transform esempi (on :hover)

translateX(20px)
translateY(-20px)
translate(-20px, 20px)
scaleX(-1)
scaleY(1.2)
scale(1.2, 0.5)
rotate(720deg)
skewX(20deg)
skewY(-20deg)
skew(-20deg, 20deg)
matrix(1.2,0,0.5,1.2,50,0)

2. Il punto di trasformazione transform-origin

La proprietà permette di spostare il centro di trasformazione, rispetto alla quale avvera un cambiamento della posizione / dimensioni / forma del elemento. Il valore di default - centr, o 50%  50%. Viene indicato solo per gli elementi in trasformazione. Non si eredita.

transform-origin
Valore:  
asse Х(left, center, right, lunghezza, %)
asse Y(top, center, bottom, lunghezza, %)
Una coppia di valori specificati tramite parole chiave, unità di lunghezza o in percentuale determina quale parte dell'elemento rispetto alla trasformazione si verificherà. Valori superiori al 100% aumentano l'area di trasformazione dell'elemento.
initial Imposta il valore della proprietà al suo valore di default..
inherit Eredita il valore della proprietà dal elemento genitore.

div {
-webkit-transform: rotate(45deg); 
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 20% 40%; 
-ms-transform-origin: 20% 40%; 
transform-origin: 20% 40%;
}

Esempio del punto iniziale della trasformazione

Vorrei precisare che questo esempio include animazione con lo scopo di mostrare il punto di applicazione della trasformazione e le sue valori come 50px 50px nel ultimo, per esempio. E quindi con la semplice trasformazione non otterrete un effetto del genere (animazione del movimento continuo)

 

50% 50%
top left

transform-origin

110% 110%
50px 50px

 

3. Trasformazione multipla

È possibile attribuire più trasformazioni ad un elemento scrivendoli divisi dallo spazio nell'ordine di visualizzazione.

div {transform: scale(1.5) rotate(-10deg);}

4. Trasformazione in pratica: come fare strisce.

CSS3 ribbon
Sconto 10%
S
A
L
D
I
Sconto 10%
Sconto 10%
Sconto 10%
Sconto 10%

E per capire meglio come sono state create guardate l'animazione sotto.

 

See the Pen Animation to Explain CSS Triangles by Chris Coyier (@chriscoyier) on CodePen.

Letto 893 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso