CSS rotate ιδιότητα

Ορισμός και χρήση

rotate Η ιδιότητα επιτρέπει τη γύρηση του στοιχείου.

rotate Η ιδιότητα ορίζει έναν αριθμό που δείχνει το βαθμό γύρισματος του στοιχείου γύρω από τον άξονα z. Για να γυρίσετε το στοιχείο γύρω από τον άξονα x ή y ή άλλους τρόπους, πρέπει να οριστεί ανάλογα.

rotate Οι τιμές της ιδιότητας μπορούν να είναι μια γωνία, όνομα άξονα + γωνία, ή τρία αριθμήματα + γωνία.

  • Αν δοθεί μόνο μια γωνία, το στοιχείο θα γυρίσει με τη σειρά του άξονα z.
  • Αν δοθεί το όνομα άξονα + γωνία, το στοιχείο θα γυρίσει με τη σειρά του άξονα που καθορίζεται.
  • Αν δοθούν τρία αριθμήματα + γωνία, τα τρία αριθμήματα ορίζουν έναν πίνακα, γύρω από τον οποίο θα γυρίζει το στοιχείο.

Για να κατανοήσετε καλύτερα rotate ιδιότητας, παρακαλώ δείτεΠαρουσίαση.

Λήψη υπόψηΈνα άλλο τεχνική για τη γύρηση του στοιχείου είναι η χρήση της ιδιότητας Λειτουργία rotate() του CSS της ιδιότητας CSS transform.

Παράδειγμα

Παράδειγμα 1

Αλλαγή της γύρησης του στοιχείου:

div {
  rotate: 30deg;
}

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

Παράδειγμα 2

όταν rotate Όταν ορίζονται οι ιδιότητες πίνακα και γωνίας, το στοιχείο θα γυρίζει γύρω από τον πίνακα.

Εδώ, ο πίνακας είναι ο δύο-άξονας πίνακας [1 1 0], με συντεταγμένες x και y, και γυρίζει 60 γωνία:

div {
  rotate: 1 1 0 60deg;
}

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

Γλώσσα CSS

rotate: άξονας γωνία|initial|κληρονομικότητα;

Τιμή ιδιότητας

Τιμή Περιγραφή
άξονας

προαιρετικά. Αν δεν έχει οριστεί, η προεπιλεγμένη τιμή είναι το άξονα z. Ορίζει τον άξονα γύρισματος του στοιχείου. Πιθανές τιμές:

  • x
  • y
  • z
γωνία

Ορίζει το βαθμό γύρισματος του στοιχείου. Πιθανές μονάδες:

  • deg（γωνία）
  • rad（αρκίδα）
  • γύρος（γύρος）
γωνία πίνακα

Τα τρία αριθμήματα ορίζουν έναν πίνακα, γύρω από τον οποίο θα γυρίζει το στοιχείο.

Αυτά τα τρία αριθμήματα είναι οι συντεταγμένες του πίνακα x, y και z του βεληνεκούς.

Η τελευταία τιμή είναι ο γωνιακός βαθμός του γύρισματος.

Πιθανές τιμές:

αριθμός αριθμός αριθμός γωνία
initial Ανασύρτε την τιμή αυτής της ιδιότητας στη προεπιλεγμένη της. Δείτε επίσης initial.
κληρονομικότητα Απόκτηση αυτής της ιδιότητας από το γονικό στοιχείο. Δείτε επίσης κληρονομικότητα.

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

Προεπιλεγμένη τιμή: μηδέν
Κληρονομικότητα: Όχι
Παραγωγή ανιματών: Υποστήριξη. Δείτε επίσης:Αντιθέματα αニματών.
Έκδοση: CSS3
Γλώσσα γραφής JavaScript: object.style.rotate="-120deg"

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

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

Chrome Edge Firefox Safari Opera
104 104 72 14.1 90

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

Εκμάθηση:CSS 2D μεταμορφώσεις

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

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

Αναφορά:Πρότυπο translate