Συνάρτηση translate() CSS

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

CSS translate() Η συνάρτηση επιτρέπει την αλλαγή της θέσης του στοιχείου.

translate() η συνάρτηση στο μεταμορφώσεις χρησιμοποιείται στην ιδιότητα.

Παράδειγμα

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

#myDiv1 {
  transform: translate(50px); /* Μετακίνηση του στοιχείου κατά 50px κατά μήκος του άξονα x και 0px κατά μήκος του άξονα y */
}
#myDiv2 {
  transform: translate(50px, 20px); /* Μετακίνηση του στοιχείου κατά 50px κατά μήκος του άξονα x και 20px κατά μήκος του άξονα y */
}
#myDiv3 {
  transform: translate(100px, 30px); /* Μετακίνηση του στοιχείου κατά 100px κατά μήκος του άξονα x και 30px κατά μήκος του άξονα y */
}

Προσπάθησε το σώμα σου

Γλώσσα CSS

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

Οptional. Ορίζει την απόσταση μετακίνησης του στοιχείου κατά μήκος του άξονα y, μπορεί να είναι αριθμός ή ποσοστό.

Αν παραλειφθεί, η τιμή ορίζεται σε 0.

Τεχνικά Στοιχεία

Έκδοση: CSS Transforms Μοντέλο Ρεβάνς 1

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

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

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

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

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

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

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

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

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