Λειτουργία translateX() CSS

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

CSS translateX() Η λειτουργία επιτρέπει την επαναπροσδιορισμό των στοιχείων κατά μήκος του άξονα Χ (οριζόντιας κατεύθυνσης).

translateX() Στην Μετασχηματισμός χρησιμοποιείται στην ιδιότητα.

Παράδειγμα

Επαναπροσδιορισμός διαφορετικών στοιχείων <div> κατά μήκος του οριζόντιου άξονα:

#myDiv1 {
  transform: translateX(50px); /* Κίνηση στοιχείου κατά μήκος του άξονα Χ 50px */
}
#myDiv2 {
  transform: translateX(100px); /* Κίνηση στοιχείου κατά μήκος του άξονα Χ 100px */
}
#myDiv3 {
  transform: translateX(-10px); /* Κίνηση στοιχείου κατά μήκος του άξονα Χ -10px */
}

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

Γλώσσα CSS

translateX(Χ)
Αξία Περιγραφή
Χ Απαιτείται. Ορίζει τη απόσταση κινήσεων του στοιχείου κατά μήκος του άξονα Χ, μπορεί να είναι αριθμός ή ποσοστό.

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

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

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

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

Χρωμέι Εντζ Φάιρφξεξ Σαφάρι Οπερα
1 12 3.5 3.1 10.5

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

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

Αναφορά:Η ιδιότητα transform του CSS

Αναφορά:Η συνάρτηση translate() του CSS

Αναφορά:Η συνάρτηση translateY() του CSS

Αναφορά:Η ιδιότητα transform του HTML DOM