Φανταστείτε τον ιστότοπό σας να μην είναι πια επίπεδος — αλλά ένας χώρος όπου τα στοιχεία κινούνται προς ή μακριά από τον χρήστη. Αυτό ακριβώς κάνει η συνάρτηση CSS translateZ(). Μετακινεί ένα στοιχείο κατά μήκος του άξονα Z σε ένα 3D περιβάλλον, κάνοντάς το να φαίνεται πιο κοντά ή πιο μακριά χωρίς να αλλάζει το πραγματικό του μέγεθος.

Πώς Λειτουργεί Πραγματικά το translateZ()

Σε μια τυπική 2D οθόνη, τα προγράμματα περιήγησης αποδίδουν μόνο ύψος και πλάτος — όχι βάθος. Έτσι, το translateZ() από μόνο του δεν έχει ορατό αποτέλεσμα. Πρέπει να προσθέσετε προοπτική (perspective), είτε μέσω της ιδιότητας perspective σε ένα γονικό στοιχείο είτε μέσω της συνάρτησης perspective() απευθείας στο στοιχείο. Χωρίς αυτήν, το στοιχείο παραμένει επίπεδο.

.box:hover {
  transform: translateZ(100px);
}

.box.perspective:hover {
  transform: perspective(500px) translateZ(100px);
}

Στο δεύτερο παράδειγμα, το πέρασμα του ποντικιού πάνω από το κουτί το μετακινεί 100px πιο κοντά — οπτικά φαίνεται μεγαλύτερο, αλλά στην πραγματικότητα άλλαξε η απόσταση. Δεν είναι το ίδιο με το scaling. Το scale() αλλάζει το μέγεθος του στοιχείου· το translateZ() το επανατοποθετεί στον 3D χώρο.

Σύνταξη και Ορίσματα

Η συνάρτηση δέχεται ένα όρισμα — μια τιμή μήκους — και χρησιμοποιείται με την ιδιότητα transform:

  • Θετικές τιμές (π.χ. 100px, 5rem) φέρνουν το στοιχείο πιο κοντά στον χρήστη.
  • Αρνητικές τιμές (π.χ. -50px, -8em) το απομακρύνουν.

Αυτό προέρχεται από την προδιαγραφή CSS Transform Module Level 2.

Δίνοντας Ζωή στο Βάθος: Perspective και preserve-3d

Για να δείτε το αποτέλεσμα, χρειάζεστε ένα 3D περιβάλλον. Ξεκινήστε με ένα σκηνικό container:

<div class="scene">
  <div class="parent">
    <div class="box">translateZ(100px)</div>
  </div>
</div>

Εφαρμόστε προοπτική στο σκηνικό και transform-style: preserve-3d στο γονικό. Στη συνέχεια, μετακινήστε το κουτί:

.scene {
  perspective: 800px;
}
.parent {
  transform-style: preserve-3d;
}
.box {
  transform: translateZ(100px);
}

Αν περιστρέψετε το γονικό στοιχείο, θα δείτε ότι το κουτί δεν μεγάλωσε — απλά είναι πιο κοντά σας από το γονικό του.

Ιδιότητα perspective vs Συνάρτηση perspective()

Και οι δύο ορίζουν προβολή, αλλά λειτουργούν διαφορετικά:

  • Ιδιότητα (perspective: 800px) ορίζεται στο γονικό στοιχείο και εφαρμόζεται σε όλα τα 3D παιδιά.
  • Συνάρτηση (perspective(800px)) εφαρμόζεται απευθείας σε ένα μόνο στοιχείο και πρέπει να έρχεται πριν από τον 3D μετασχηματισμό στην τιμή.
/* Λειτουργεί */
.element {
  transform: perspective(800px) translateZ(100px);
}

/* Δεν λειτουργεί — η σειρά έχει σημασία */
.element {
  transform: translateZ(100px) perspective(800px);
}

Ενίσχυση Απόδοσης; Ναι, Πραγματικά

Εδώ είναι ένα πρακτικό πλεονέκτημα: το translateZ(0) μεταφέρει την απόδοση από την CPU στην GPU. Αυτό το κόλπο αποτρέπει το τρεμόπαιγμα κατά τη διάρκεια των animations και κάνει τις μεταβάσεις πιο ομαλές — ιδιαίτερα χρήσιμο για διαδραστικά στοιχεία σε επαγγελματικές ιστοσελίδες, όπως αναπτυσσόμενα μενού ή modals.

Αν δημιουργείτε έναν πολύγλωσσο ιστότοπο (EN/RU/EL) για πελάτες στην Κύπρο ή την ΕΕ, η ομαλή απόδοση έχει σημασία. Ένα δυσλειτουργικό μενού σε ένα e-commerce checkout μπορεί να κοστίσει μετατροπές.

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

Όλα τα σύγχρονα προγράμματα περιήγησης υποστηρίζουν το translateZ() — δεν χρειάζονται polyfills. Ωστόσο, ελέγχετε πάντα σε παλαιότερες συσκευές αν το κοινό σας τις χρησιμοποιεί.

Πρακτικά Συμπεράσματα για το Επόμενο Project σας

  • Χρησιμοποιήστε το translateZ() για διακριτικά εφέ hover σε CTAs ή κάρτες προϊόντων — προσθέτει βάθος χωρίς απότομα animations.
  • Συνδυάστε το με perspective και preserve-3d για να δημιουργήσετε καθηλωτικές γκαλερί ή διαδραστικά dashboards.
  • Αποφύγετε τη χρήση του ως αντικατάσταση του scale() — λύνουν διαφορετικά προβλήματα.
  • Για συμμόρφωση με GDPR (συνηθισμένο στην ΕΕ), διατηρήστε τα animations προσβάσιμα: προτιμήστε το prefers-reduced-motion ως εναλλακτική.