Corso raccomandato:

Funzione CSS rotate3d()

Definizione e uso rotate3d() CSS

rotate3d() La funzione definisce la rotazione 3D dell'elemento. transform usato nell'attributo.

Esempio

Esempio 1

Usa rotate3d() Rotazione di più elementi <div>:

#myDiv1 {
  transform: rotate3d(1, 2, 1, 45deg);
}
#myDiv2 {
  transform: rotate3d(0, 1, 0, 60deg);
}
#myDiv3 {
  transform: rotate3d(1, 0, 0, 45deg);
}

Prova tu stesso

Esempio 2

Usa rotate3d() Rotazione dell'immagine:

#img1 {
  transform: rotate3d(1, 2, 1, 45deg);
}
#img2 {
  transform: rotate3d(0, 1, 0, 60deg);
}
#img3 {
  transform: rotate3d(1, 0, 0, 45deg);
}

Prova tu stesso

Sintassi CSS

rotate3d(x, y, z, angle)
Valore Descrizione
x Numero positivo o negativo, definisce la rotazione lungo l'asse x.
y Numero positivo o negativo, definisce la rotazione lungo l'asse y.
z Numero positivo o negativo, definisce la rotazione lungo l'asse z.
angle

Obbligatorio. Specificare l'angolo di rotazione. Unità possibili:

  • deg（gradi）
  • rad（radiani）
  • turn（circolo）

Dettagli tecnici

Versione: Modulo CSS Transforms Livello 2

Supporto del browser

I numeri nella tabella rappresentano la versione del browser che supporta completamente la funzione.

Chrome Edge Firefox Safari Opera
12 12 10 4 15

Pagine correlate

Guida:Trasformazione 3D CSS

Riferimento:Proprietà CSS transform

Riferimento:Proprietà CSS rotate

Riferimento:Funzione CSS rotate()

Riferimento:Funzione CSS rotateX()

Riferimento:Funzione CSS rotateY()

Riferimento:Funzione CSS rotateZ()