Όταν χρειάζεται να μετακινήσετε ένα στοιχείο οριζόντια σε μια διαδικτυακή διεπαφή, η συνάρτηση CSS translateX() κάνει ακριβώς αυτό. Μετατοπίζει ένα στοιχείο οριζόντια — δεξιά για θετικές τιμές, αριστερά για αρνητικές.

Τι κάνει η translateX()

Αυτή η συνάρτηση ανήκει στην ιδιότητα transform και ορίζεται στο προσχέδιο CSS Transforms Module Level 1. Δέχεται ένα μοναδικό όρισμα <length-percentage>:

  • <length>: Απόλυτες μονάδες όπως 80px μετακινούν το στοιχείο 80px δεξιά· το -24ch το μετακινεί 24 χαρακτήρες αριστερά.
  • <percentage>: Σχετικό με το πλάτος του ίδιου του στοιχείου. Για ένα κουτί πλάτους 400px, η translateX(50%) το μετακινεί 200px δεξιά, και η translateX(-50%) το μετακινεί 200px αριστερά.

Πρακτικές χρήσεις για επιχειρηματικούς ιστότοπους

Συρόμενες πλαϊνές μπάρες

Ένα κοινό μοτίβο για πλοήγηση σε κινητά: συρόμενο πάνελ που εμφανίζεται από το πλάι. Ξεκινήστε με transform: translateX(-100%) για να το κρύψετε εκτός οθόνης, και εναλλάξτε σε translateX(0) όταν ο χρήστης πατήσει ένα κουμπί. Προσθέστε μετάβαση για ομαλή κίνηση.

.sidebar { transform: translateX(-100%); transition: transform 0.2s ease-in; }
.sidebar.open { transform: translateX(0); }

Ατέρμονη ταινία κύλισης (marquee)

Χρειάζεται να προβάλλετε μια σειρά από λογότυπα πελατών ή νέες αφίξεις στο e-commerce σας; Μια ταινία κύλισης τα μετακινεί συνεχώς. Χρησιμοποιήστε ένα keyframe animation από translateX(0) σε translateX(-50%) με animation: marquee-scroll 20s linear infinite. Το μισό πλάτος μετατοπίζεται αριστερά και επαναλαμβάνεται.

Placeholder φόρτωσης με εφέ λάμψης (shimmer)

Αποτρέψτε μετατοπίσεις διάταξης όσο φορτώνεται το περιεχόμενο — ιδιαίτερα σημαντικό για ιστότοπους συμβατούς με GDPR στην ΕΕ, όπου η ταχύτητα έχει σημασία. Ένα στατικό γκρι placeholder λειτουργεί, αλλά η προσθήκη εφέ λάμψης το κάνει πιο επαγγελματικό. Χρησιμοποιήστε ένα ψευδο-στοιχείο ::after που ξεκινά από translateX(-120%), το κινείτε σε 120% και το επαναλαμβάνετε ατέρμονα. Η ντεγκραντέ κλίση περνά πάνω από το placeholder σαν φως.

Βασική συμπεριφορά: καμία μετατόπιση διάταξης

Σε αντίθεση με το margin ή το position: relative, η translateX() δεν επηρεάζει τη ροή του εγγράφου. Το στοιχείο μετακινείται οπτικά, αλλά ο αρχικός του χώρος παραμένει δεσμευμένος. Τα γειτονικά πλαίσια δεν μετακινούνται ούτε αναδιατάσσονται. Αυτό την καθιστά ιδανική για κινούμενα σχέδια χωρίς ακριβούς επαναϋπολογισμούς διάταξης — σημαντικό πλεονέκτημα απόδοσης σε κινητές συσκευές.

Προσοχή στο τρεμόπαιγμα hover

Αν εφαρμόσετε translateX() απευθείας σε κατάσταση :hover και το στοιχείο μετακινηθεί αρκετά μακριά από τον κέρσορα, η κατάσταση hover χάνεται, το στοιχείο επιστρέφει απότομα και δημιουργείται ένας βρόχος τρεμοπαίγματος. Λύση: τυλίξτε το μετακινούμενο στοιχείο σε ένα γονικό container και συνδέστε το :hover στο γονικό. Το παιδί μετατοπίζεται, το hover παραμένει σταθερό.