Ιδιότητα transformOrigin του Style

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

transformOrigin Η ιδιότητα επιτρέπει τη μεταβολή της θέσης του μετατρεπόμενου στοιχείου.

Οι στοιχεία 2D μετατροπής μπορούν να αλλάξουν το άξονα x και y του στοιχείου. Οι στοιχεία 3D μετατροπής μπορούν επίσης να αλλάξουν τον άξονα z του στοιχείου.

Σημειώσεις:Αυτή η ιδιότητα πρέπει να συνδυαστεί με Ιδιότητα transform Χρήση μαζί τους.

Δείτε επίσης:

Όνειρο Στυλ αντικειμένων JavaScript:Ιδιότητα transform

Χειροκίνητο εγχειρίδιο CSS:Η ιδιότητα transform-origin

Παράδειγμα

Ρύθμιση της βασικής θέσης του στοιχείου που γυρίζεται:

document.getElementById("myDIV").style.transformOrigin = "0 0";

Προσπαθήστε το προσωπικά

Γραμματική

Επιστροφή της ιδιότητας transformOrigin:

object.style.transformOrigin

Ρύθμιση της ιδιότητας transformOrigin:

object.style.transformOrigin = "x-axis y-axis z-axis|initial|inherit"

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

Τιμή Περιγραφή
x-axis

Ορίζει τη θέση της προβολής στον άξονα x. Πιθανές τιμές:

  • left
  • center
  • right
  • length
  • %
y-axis

Ορίζει τη θέση της προβολής στον άξονα y. Πιθανές τιμές:

  • top
  • center
  • bottom
  • length
  • %
z-axis

Ορίζει τη θέση της προβολής στον άξονα z. Πιθανές τιμές:

  • length
initial Ρυθμίστε αυτή την ιδιότητα στη προεπιλεγμένη της τιμή. Δείτε επίσης initial.
inherit Κληρονομεί αυτή την ιδιότητα από το γονικό στοιχείο. Δείτε επίσης inherit.

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

Προεπιλεγμένη τιμή: 50% 50% 0
Αποτελεσματική τιμή: String, που εκφράζει τη θέση του στοιχείου Η ιδιότητα transform-origin.
Έκδοση CSS: CSS3

Υποστήριξη περιηγητή

Οι αριθμοί στην τаблицή σημειώνουν την έκδοση του πρώτου περιηγητή που υποστηρίζει πλήρως αυτή την ιδιότητα.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
36.0 10.0 16.0 9.0 23.0