CSS μετακίνηση ιδιότητα

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

translate Η ιδιότητα επιτρέπει να αλλάξετε τη θέση του στοιχείου.

translate Η ιδιότητα ορίζει τις συντεταγμένες του στοιχείου στο δύο-άξονα χώρο. Μπορείτε επίσης να ορίσετε τις συντεταγμένες άξονα z για να αλλάξετε τη θέση του στο τριδιάστατο χώρο.

Οι συντεταγμένες μπορούν να δοθούν μόνο με συντεταγμένες άξονα x, ή με συντεταγμένες άξονα x και y, ή με συντεταγμένες άξονα x, y και z.

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

Συμβουλή:Για να λειτουργήσει η ιδιότητα άξονα z, πρέπει να ορίσετε μια τιμή για την ιδιότητα CSS perspective.

Λήψη υπόψη:Εναλλακτική τεχνική μετακίνησης των στοιχείων είναι η χρήση του CSS μετακίνηση() συνάρτηση Η ιδιότητα CSS transform της σελίδας αυτής μπορεί να πει ότι είναι μια πιο απλή και πιο άμεση μέθοδος για να μετακινήσουμε τα στοιχεία.

Παράδειγμα

Παράδειγμα 1

Αλλάξτε τη θέση του στοιχείου:

div {
  translate: 100px 20px;
}

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

Παράδειγμα 2

Όταν ρυθμίζετε τον άξονα z translate Πρέπει να ρυθμίσετε αυτήν την ιδιότητα και στο γονικό στοιχείο όταν χρησιμοποιείτε την ιδιότητα perspective Για να δούμε αποτελέσματα, πρέπει να ρυθμίσουμε την ιδιότητα:

DIV1 {
  perspective: 200px;
}
DIV2 {
  translate: 50px 50px 50px;
}

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

Γλώσσα CSS

translate: άξονας x άξονας y άξονας z|προκαταρκτική|προκαταρκτική;

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

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

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

  • Μέγεθος
  • Ποσοστό
άξονας y

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

  • Μέγεθος
  • Ποσοστό
άξονας z

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

  • Μέγεθος
  • Ποσοστό
προκαταρκτική Ρυθμίστε αυτήν την ιδιότητα στη προεπιλεγμένη τιμή. Δείτε: προκαταρκτική.
προκαταρκτική Απόκτησε αυτήν την ιδιότητα από το γονικό στοιχείο του. Δείτε: προκαταρκτική.

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

Προεπιλεγμένη τιμή: μηδέν
Προκαταρκτική απόκτηση: Όχι
Δημιουργία animation: Υποστηρίζεται. Δείτε:Ιδιότητες animation.
Έκδοση: CSS3
Γλώσσα JavaScript: object.style.translate="10px 20px"

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

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

Chrome Edge Firefox Safari Opera
104 104 72 14.1 90

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

CSS Εκμάθηση:CSS 2D μεταμόρφωση

CSS Εκμάθηση:CSS 3D μεταμόρφωση

CSS Εγχειρίδιο:CSS κλίμακα ιδιότητα

CSS Εγχειρίδιο:CSS γυροστροφή ιδιότητα

CSS Εγχειρίδιο:CSS οπτική ιδιότητα