CSS transform-origin ιδιότητα

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

Το όρισμα transform-origin επιτρέπει να αλλάξετε τη θέση του στοιχείου που μετατρέπεται.

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

Για να κατανοήσετε καλύτερα το όρισμα transform-origin, δείτε αυτό τοΠαρουσίαση.

Χρήστες Safari/Chrome: Για να κατανοήσετε καλύτερα τη χρήση του όρισματος transform-origin για 3D μετατροπές, δείτε αυτό τοΠαρουσίαση.

Σημειώσεις:Το όρισμα πρέπει να χρησιμοποιείται μαζί με transform όρισμα χρησιμοποιείται μαζί.

Για να κατανοήσετε καλύτερα το όρισμα transform, δείτε αυτό τοΠαρουσίαση.

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

Εκμάθηση CSS3:CSS3 2D μετατροπή

Εκμάθηση CSS3:CSS3 3D μετατροπή

Εγχειρίδιο HTML DOM:Παράδειγμα του όρισματος transformOrigin

Παράδειγμα

Ορίζει τη θέση του σημείου αναφοράς του στοιχείου που γυρίζεται:

div {
  transform: rotate(45deg);
  transform-origin: 20% 40%;
}

Δοκιμάστε να το κάνετε μόνοι σας

Υπάρχουν περισσότερες παραδείγματα στην κάτω πλευρά της σελίδας.

Γλωσσάς CSS

transform-origin: άξονας X άξονας Y άξονας Z;

Τιμή του ορισμού

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

Ορίζει πού το μοντέλο οπτικής τοποθετείται στο άξονα X. Πιθανές τιμές:

  • αριστερά
  • κέντρο
  • δεξιά
  • μήκος
  • %
άξονας Y

Ορίζει πού το μοντέλο οπτικής τοποθετείται στο άξονα Y. Πιθανές τιμές:

  • πάνω
  • κέντρο
  • κάτω
  • μήκος
  • %
άξονας Z

Ορίζει πού το μοντέλο οπτικής τοποθετείται στο άξονα Z. Πιθανές τιμές:

  • μήκος

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

Προεπιλεγμένη τιμή: 50% 50% 0
Αντιληψιμότητα: όχι
Έκδοση: CSS3
Γλωσσάς JavaScript: objekt.style.transformOrigin="20% 40%"

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

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

Τα αριθμήματα στην τаблицή δείχνουν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως το όρισμα με πρόθεμα -webkit-, -moz- ή -ms-.

όρισμα Chrome IE Firefox Safari Opera
transform-origin
(δύο αξιών γλωσσάς)		 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform-origin
(τριών αξιών γλωσσάς)		 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-