Προτάσεις Μαθημάτων:

Συνάρτηση rotateX() CSS

Ορισμός και Χρήση rotateX() CSS

rotateX() Η συνάρτηση ορίζει την 3D στροφή του στοιχείου γύρω από τον άξονα x (οριζόντια κατεύθυνση). transform Χρησιμοποιείται στην ιδιότητα.

Παράδειγμα

Παράδειγμα 1

Χρήση rotateX() Γύρω από τον άξονα x (οριζόντια κατεύθυνση) γυρίζει πολλαπλά <div> στοιχεία:

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

Δοκιμάστε το προσωπικά

Παράδειγμα 2

Χρήση rotateX() Γύρω από τον άξονα x (οριζόντια κατεύθυνση) γυρίζει την εικόνα:

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

Δοκιμάστε το προσωπικά

Γλώσσα CSS

rotateX(γωνία)
Αξία Περιγραφή
γωνία

Απαιτείται. Ορίζει το γωνιαίο όρισμα. Πιθανές μονάδες:

  • deg（γωνία）
  • rad（ακτίνα）
  • turn（κύκλος）

Τεχνικά Στοιχεία

Έκδοση: CSS Transforms Module Level 2

Υποστήριξη Πλοηγητών

Τα αριθμήματα των πλοηγητών δείχνουν την έκδοση που υποστηρίζει πλήρως τη συνάρτηση.

Chrome Edge Firefox Safari Opera
12 12 10 4 15

Σχετικές Σελίδες

Εκμάθηση:CSS 3D Μετασχηματισμοί

Αναφορές:CSS attribute transform

Αναφορές:Η ιδιότητα CSS rotate

Αναφορές:CSS συνάρτηση rotate()

Αναφορές:CSS συνάρτηση rotate3d()

Αναφορές:CSS συνάρτηση rotateY()

Αναφορές:CSS συνάρτηση rotateZ()