Trasformazioni 3D CSS

Trasformazioni 3D CSS

CSS supporta anche le trasformazioni 3D.

Fare clic con il mouse sugli elementi sottostanti per vedere la differenza tra la trasformazione 2D e 3D:

rotate 2D
rotate 2D

rotate 3D

  • transform

In questa sezione, imparerai le seguenti proprietà CSS:

Supporto del browser

Proprietà Il numero nella tabella indica la versione del browser che supporta completamente l'attributo. IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

Metodi di trasformazione 3D CSS

attraverso CSS transform Puoi utilizzare i seguenti metodi di trasformazione 3D:

  • rotateX()
  • rotateY()
  • rotateZ()

Metodo rotateX()

Ruota X

rotateX() Metodo per far ruotare l'elemento di un angolo specificato intorno al suo asse X:

Esempio

#myDiv {
  transform: rotateX(150deg);
}

Prova a fare tu stesso

Metodo rotateY()

Ruota Y

rotateY() Metodo per far ruotare l'elemento di un angolo specificato intorno al suo asse Y:

Esempio

#myDiv {
  transform: rotateY(130deg);
}

Prova a fare tu stesso

Metodo rotateZ()

rotateZ() Metodo per far ruotare l'elemento di un angolo specificato intorno al suo asse Z:

Esempio

#myDiv {
  transform: rotateZ(90deg);
}

Prova a fare tu stesso

Proprietà di trasformazione CSS

La tabella seguente elenca tutte le proprietà di trasformazione 3D:

Proprietà Descrizione
transform Applica una trasformazione 2D o 3D all'elemento.
transform-origin Permetti di cambiare la posizione dell'elemento trasformato.
transform-style Definisci come vengono visualizzati gli elementi annidati nello spazio 3D.
perspective Definisci l'effetto di prospettiva dell'elemento 3D.
perspective-origin Definisci la posizione inferiore dell'elemento 3D.
backface-visibility Definisci se l'elemento è visibile quando non è rivolto verso lo schermo.

Metodi di trasformazione 3D CSS

Funzione Descrizione
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)		 Definisci la trasformazione 3D, utilizzando una matrice 4x4 di 16 valori.
translate3d(x,y,z) Definisci la trasformazione 3D.
translateX(x) Definisci la trasformazione 3D, utilizzando solo i valori per l'asse X.
translateY(y) Definisci la trasformazione 3D, utilizzando solo i valori per l'asse Y.
translateZ(z) Definisci la trasformazione 3D, utilizzando solo i valori per l'asse Z.
scale3d(x,y,z) Definisci la trasformazione di ingrandimento 3D.
scaleX(x) Definisci la trasformazione di ingrandimento 3D, fornendo un valore dell'asse X.
scaleY(y) Definisci la trasformazione di ingrandimento 3D, fornendo un valore dell'asse Y.
scaleZ(z) Definisci la trasformazione di ingrandimento 3D, fornendo un valore dell'asse Z.
rotate3d(x,y,z,angolo) Definire la rotazione 3D.
ruotareX(angolo) Definire la rotazione 3D lungo l'asse X.
ruotareY(angolo) Definire la rotazione 3D lungo l'asse Y.
ruotareZ(angolo) Definire la rotazione 3D lungo l'asse Z.
prospettiva(n) Definire la vista di prospettiva 3D dell'elemento di trasformazione 3D.