Conversione CSS3 3D

trasformazioni 3D

CSS3 consente di utilizzare 3D per formattare elemento di conversione.

In questo capitolo, imparerete alcuni dei metodi di conversione 3D:

Clicca sui seguenti elementi per vedere la differenza tra 2D e 3D di conversione conversione tra:

2D ruotare

rotazione 3D

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.

属性
transform	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-
transform-origin (three-value syntax)	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-
transform-style	36.0 12.0 -webkit-	11.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-
perspective	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-
perspective-origin	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-
backface-visibility	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-

Metodo rotateX (), i cui elementi intorno ad un determinato numero di gradi di rotazione nella X-asse.

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}

Metodo RotateY (), i cui elementi intorno ad un determinato numero di gradi di rotazione nella Y.

div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}

Nella tabella seguente sono elencate tutte le proprietà di trasformazione:

proprietà	descrizione	CSS
trasformare	Applicato al 2D elemento o la conversione in 3D.	3
trasformare origine	Esso consente di cambiare la posizione dell'elemento da convertire.	3
trasformare in stile	Disposizione è stata come gli elementi annidati vengono visualizzati nello spazio 3D.	3
prospettiva	Disposizioni 3D elemento effetto prospettico.	3
prospettiva origine	Una posizione predeterminata del fondo dell'elemento 3D.	3
controfaccia visibilità	Definire gli elementi quando non è di fronte lo schermo è visibile.	3

funzione	descrizione
Matrix3D (n, n, n,n, n, n, n, n, n, n,n, n, n, n, n, n)	conversione in 3D definita utilizzando 16 valori matrice 4x4.
translate3d(x, y, z)	Definito trasformazione 3D.
translateX(x)	Definire conversione 3D, utilizzando solo i valori per l'asse X.
translateY(y)	Definire conversione 3D, utilizzando solo i valori per l'asse Y.
translateZ(z)	Definire conversione 3D, utilizzando solo i valori per l'asse Z.
scale3d(x, y, z)	Definire trasformazione scala 3D.
scaleX(x)	trasformazione di scala 3D è definito da un dato valore di X-asse.
scaleY(y)	trasformazione di scala 3D è definito da un dato valore di Y.
scaleZ(z)	trasformazione di scala 3D è definito da un dato valore dell'asse Z.
Ruota3D (x, y, z,angolo)	Definire rotazione 3D.
rotateX(angolo)	Definito lungo la rotazione asse X 3D.
RotateY(angolo)	Definito lungo l'asse Y di rotazione 3D.
rotateZ(angolo)	Definito lungo l'asse Z di rotazione 3D.
prospettiva(n)	vista prospettica 3D della definizione dell'elemento di conversione.