Προτεινόμενη εκμάθηση:

Συνάρτηση rotate3d() του CSS

Ορισμός και χρήση rotate3d() CSS

rotate3d() Η συνάρτηση ορίζει την 3D περιστροφή του στοιχείου. transform Χρήση στην ιδιότητα.

Παράδειγμα

Παράδειγμα 1

Χρήση rotate3d() Περιστροφή πολλαπλών στοιχείων <div>:

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

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

Παράδειγμα 2

Χρήση rotate3d() Περιστροφή εικόνας:

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

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

Γλωσσική σύνταξη του CSS

rotate3d(x, y, z, γωνία,
) Περιγραφή
x Ποσότητα ή αρνητικός αριθμός, ορίζει την περιστροφή κατά μήκος του άξονα x.
y Ποσότητα ή αρνητικός αριθμός, ορίζει την περιστροφή κατά μήκος του άξονα y.
z Ποσότητα ή αρνητικός αριθμός, ορίζει την περιστροφή κατά μήκος του άξονα z.
γωνία

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

  • deg（γωνία）
  • rad（απομετρήσεις γωνίας）
  • turn（κύκλος）

Τεχνικά λεπτομέρειες

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

Υποστήριξη του προγράμματος περιήγησης

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

Chrome Edge Firefox Safari Opera
12 12 10 4 15

Σελίδες συναφείς

Εκμάθηση:CSS 3D μετασχηματισμός

Αναφορά:CSS μετασχηματισμός ιδιότητα

Αναφορά:CSS rotate ιδιότητα

Αναφορά:CSS γύρισμα() συνάρτηση

Αναφορά:CSS γύρισμαX() συνάρτηση

Αναφορά:CSS γύρισμαY() συνάρτηση

Αναφορά:CSS γύρισμαZ() συνάρτηση