Il miglior tutorial conversione CSS3 2D Nel 2024, in questo tutorial puoi imparare CSS3 conversione,Come funziona?,Supporto per il browser,conversione 2D,Esempi,metodo translate (),Esempi,Metodo di rotazione (),Esempi,Metodo di scala (),Esempi,metodo skew (),Esempi,metodo della matrice (),Esempi,Nuova proprietà di conversione,metodo di conversione 2D,

conversione CSS3 2D

CSS3 conversione

CSS3 transizione, può essere spostato, in scala, a sua volta, ruotare e gli elementi elastici.

Come funziona?

L'effetto della conversione, in modo che un elemento per cambiare la forma, dimensione e posizione.

È possibile convertire i tuoi elementi 2D o 3D.

Supporto per il browser

I dati riportati nella tabella rappresentano il primo browser a supportare il numero di versione della proprietà.

Subito dopo la -webkit- digitale, -MS- o -moz- fa a sostegno del prefisso attribuiscono primo numero di versione del browser.

Internet Explorer 10, Firefox e Opera supporta trasformare proprietà.

Chrome e Safari richiede la versione del prefisso -webkit-.

Nota: Internet Explorer 9 richiede la versione del prefisso -MS-.

conversione 2D

In questo capitolo imparerete metodo di conversione 2D:

• translate ()
• ruotare ()
• scala ()
• skew ()
• matrice ()

Nel prossimo capitolo imparerete conversione in 3D.

Esempi

div { trasformare: ruotare (30 gradi) ; - Ms-transform: ruotare (30 gradi) ; / * IE 9 * / - webkit-transform: ruotare (30 gradi) ; / * Safari e Chrome * / }

Prova »

metodo translate ()

translate () metodo, secondo la sinistra (asse X) e la parte superiore (asse Y) posizione del parametro specificato, si sposta dalla posizione corrente dell'elemento.

Esempi

div { trasformare: translate (50 px, 100 px) ; - Ms-transform: translate (50 px, 100 px) ; / * IE 9 * / - webkit-transform: translate (50 px, 100 px) ; / * Safari e Chrome * / }

Prova »

tradurre il valore (50px, 100px) è un elemento mobile 50 pixel da sinistra, e si è trasferito 100 pixel dall'alto.

Metodo di rotazione ()

ruotare il metodo (), in un determinato numero di gradi in senso orario degli elementi. Un valore negativo è permesso, questa è la rotazione antioraria degli elementi.

Esempi

div { trasformare: ruotare (30 gradi) ; - Ms-transform: ruotare (30 gradi) ; / * IE 9 * / - webkit-transform: ruotare (30 gradi) ; / * Safari e Chrome * / }

Prova »

valore di ruotare gli elementi (30deg) ruotato di 30 gradi in senso orario.

Metodo di scala ()

metodo scale (), che aumentare o diminuire le dimensioni dell'elemento, a seconda della larghezza (asse X) e parametri di altezza (asse Y):

Esempi

-ms-transform: scala (2,3) ; / * IE 9 * / -webkit-transform: scala (2,3); / * Safari * / transform: scala (2,3); / * standard sintassi * /

Prova »

scala (2,3) larghezza di transizione è due volte la sua dimensione originale, e tre volte più grande della sua altezza originaria.

metodo skew ()

metodo skew (), l'elemento secondo l'trasversale (asse X) e parametri di linea verticale (asse Y) per un dato angolo:

Esempi

div { trasformare: skew (30 gradi, 20 gradi) ; - Ms-transform: skew (30 gradi, 20 gradi) ; / * IE 9 * / - webkit-transform: skew (30 gradi, 20 gradi) ; / * Safari e Chrome * / }

Prova »

skew (30deg, 20deg) è un elemento di asse X e Y circa 20 gradi circa 30 gradi.

metodo della matrice ()

metodo della matrice () e il metodo di conversione 2D fuse in una.

Metodo di matrice ha sei parametri, compresa la rotazione, ridimensionamento, in movimento (panning) e le funzioni di inclinazione.

Esempi

L'uso di matrice () metodo di rotazione dell'elemento div 30 °

div { transform matrice (0.866, 0,5, - 0,5, 0.866, 0, 0) ; - Ms-transform: matrice ( 0.866, 0,5, - 0,5, 0.866, 0, 0) ; / * IE 9 * / - webkit-transform: matrice (0.866, 0,5, - 0,5, 0.866, 0, 0) ; / * Safari e Chrome * / }

Prova »

Nuova proprietà di conversione

Di seguito è riportato un elenco di tutte le proprietà di conversione:

metodo di conversione 2D