Corso raccomandato:

Funzione rotateX() CSS

Definizione e uso rotateX() CSS

rotateX() La funzione definisce la rotazione 3D dell'elemento attorno all'asse x (direzione orizzontale). transform usato nell'attributo.

Esempio

Esempio 1

Usare rotateX() Rotazione di più elementi <div> attorno all'asse x (direzione orizzontale):

#myDiv1 {
  transform: rotateX(40deg);
}
#myDiv2 {
  transform: rotateX(60deg);
}
#myDiv3 {
  transform: rotateX(80deg);
}

Prova tu stesso

Esempio 2

Usare rotateX() Rotazione dell'immagine attorno all'asse x (direzione orizzontale):

#img1 {
  transform: rotateX(40deg);
}
#img2 {
  transform: rotateX(60deg);
}
#img3 {
  transform: rotateX(80deg);
}

Prova tu stesso

Sintassi CSS

rotateX(angle)
Valore Descrizione
angle

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

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

Dettagli tecnici

Versione: Modulo di trasformazioni CSS Livello 2

Supporto del browser

I numeri delle browser indicano la versione del browser che supporta completamente la funzione.

Chrome Edge Firefox Safari Opera
12 12 10 4 15

Pagine correlate

Guida:Transformazioni 3D CSS

Riferimento:Proprietà CSS transform

Riferimento:Proprietà CSS rotate

Riferimento:Funzione CSS rotate()

Riferimento:Funzione CSS rotate3d()

Riferimento:Funzione CSS rotateY()

Riferimento:Funzione CSS rotateZ()