CSS translateY: Οδηγός Κάθετης Μετακίνησης & Κίνησης Στοιχείων

Ας υποθέσουμε ότι χρειάζεται να μετακινήσετε ένα στοιχείο κάθετα—πάνω ή κάτω, σε μια συγκεκριμένη απόσταση. Η συνάρτηση CSS translateY() κάνει ακριβώς αυτό. Αποτελεί μέρος της ιδιότητας transform και ορίζεται στο πρότυπο CSS Transforms Module Level 1.

Πώς λειτουργεί

Η σύνταξη είναι απλή:

<translateY()> = translateY( <length-percentage> )

Αυτός είναι απλώς ένας τυπικός τρόπος να πούμε: μετακίνησε αυτό το στοιχείο κάθετα κατά αυτή την ποσότητα.

Ορίσματα

<length>: Οι θετικές τιμές (π.χ. 80px) μετακινούν το στοιχείο προς τα κάτω· οι αρνητικές τιμές (π.χ. -24ch) το μετακινούν προς τα πάνω.
<percentage>: Σχετική με το ύψος του ίδιου του στοιχείου. Έτσι, το translateY(50%) σε ένα πλαίσιο ύψους 100px το μετακινεί 50px προς τα κάτω· το translateY(-100%) το μετακινεί 100px προς τα πάνω.

Γιατί να το χρησιμοποιήσετε σε παραγωγή;

Σε αντίθεση με το margin-top ή το top, το translateY() δεν προκαλεί αναδιάταξη (reflows) ούτε επηρεάζει τις θέσεις άλλων στοιχείων. Ο αρχικός χώρος παραμένει δεσμευμένος στη διάταξη. Αυτό το καθιστά ιδανικό για εφέ κίνησης και εφέ αιώρησης σε πίνακες ελέγχου (dashboards), κάρτες στατιστικών ή πεδία φορμών—ειδικά σε μονοσέλιδες εφαρμογές ή ροές ολοκλήρωσης αγοράς σε e‑commerce.

Πρακτικό παράδειγμα: συρόμενες κάρτες στατιστικών

Φανταστείτε έναν πίνακα ελέγχου (.dashboard) με πολλές κάρτες στατιστικών που πρέπει να γλιστρήσουν προς τα πάνω όταν ο χρήστης κάνει κύλιση ή κάνει κλικ. Ξεκινήστε μετατοπίζοντάς τες 50px προς τα κάτω και κρύβοντάς τες:

.stat-card {
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity 0.8s ease-in,
    transform 0.8s ease-in,
    box-shadow 0.3s ease;
}

Όταν ενεργοποιείται το .dashboard.active, γίνονται ορατές και γλιστρούν στη φυσική τους θέση:

.dashboard.active .stat-card {
  opacity: 1;
  transform: translateY(0);
}

Στην αιώρηση, δώστε μια μικρο-κίνηση μετακινώντας την κάρτα 8px προς τα πάνω:

.dashboard.active .stat-card:hover {
  transform: translateY(-8px);
}

Εφέ εστίασης σε πεδίο φόρμας

Βιβλιοθήκες διεπαφής χρήστη όπως το MUI χρησιμοποιούν παρόμοια τεχνική για αιωρούμενες ετικέτες (floating labels). Η ετικέτα βρίσκεται μέσα στο πεδίο εισαγωγής ως υπόδειξη (απόλυτα τοποθετημένη) και στη συνέχεια το translateY(-32px) τη μετακινεί προς τα πάνω όταν ο χρήστης εστιάζει ή πληκτρολογεί:

label {
  position: absolute;
  left: 15px;
  top: 15px;
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

input:focus ~ label,
input:not(:placeholder-shown) ~ label {
  transform: translateY(-32px) scale(0.8);
  color: #6200ee;
  font-weight: bold;
}

Προσοχή στο τρεμόπαιγμα κατά την αιώρηση

Αν εφαρμόσετε το translateY() απευθείας στο :hover και το στοιχείο μετακινηθεί μακριά από τον δείκτη, χάνει την κατάσταση αιώρησης και επανέρχεται απότομα—προκαλώντας έναν βρόχο τρεμοπαίγματος. Διορθώστε το περιβάλλοντας το στοιχείο σε ένα γονικό στοιχείο και εφαρμόζοντας την ψευδο-κλάση εκεί:

.parent:hover .good {
  transform: translateY(160px);
}

Τοπικές σκέψεις για επιχειρήσεις στην Κύπρο / ΕΕ

Κατά τη δημιουργία πολύγλωσσων ιστοτόπων (EN, RU, EL), να θυμάστε ότι το translateY() λειτουργεί πανομοιότυπα σε όλα τα προγράμματα περιήγησης και τις γλωσσικές εκδόσεις—δεν χρειάζονται γλωσσικά-ειδικές παρακάμψεις. Είναι ελαφρύ και δεν εξαρτάται από εξωτερικές βιβλιοθήκες, πράγμα που βοηθά στη συμμόρφωση με τον GDPR (λιγότερες εξαρτήσεις τρίτων). Για εφαρμογές e-commerce, οι ομαλές μικρο-αλληλεπιδράσεις (όπως η αιώρηση σε κάρτες ή οι ετικέτες φορμών) βελτιώνουν άμεσα την αντιληπτή απόδοση και τα ποσοστά μετατροπής.

Επίδειξη

Ελέγξτε το ενσωματωμένο CodePen για να δείτε το translateY() σε δράση με κάρτες στατιστικών, πεδία φορμών και τη διόρθωση του τρεμοπαίγματος στην αιώρηση.

62px

translateY()