Συνάρτηση translateX

Η συνάρτηση translateX ορίζει τη μετατόπιση ενός στοιχείου κατά τον άξονα X. Χρησιμοποιείται μαζί με την ιδιότητα transform. Ως τιμή της ιδιότητας χρησιμοποιούνται οποιεσδήποτε μονάδες μεγέθους. Θετική τιμή μετατοπίζει προς τα δεξιά, αρνητική - προς τα αριστερά.

Σύνταξη

επιλογέας {
	transform: translateX(μετατόπιση);
}

Παράδειγμα

Αν τοποθετήσετε το ποντίκι πάνω από το μπλοκ - θα μετατοπιστεί κατά 30px προς τα δεξιά:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	width: 100px;
	height: 50px;
}
#elem:hover {
	transform: translateX(30px);
}

Παράδειγμα

Αν τοποθετήσετε το ποντίκι πάνω από το μπλοκ - θα μετατοπιστεί κατά 30px προς τα αριστερά:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	width: 100px;
	height: 50px;
}
#elem:hover {
	transform: translateX(-30px);
}

Δείτε επίσης

τη συνάρτηση translate,
που ορίζει μετατόπιση κατά τους άξονες X και Y
τη συνάρτηση translateY,
που ορίζει μετατόπιση κατά τον άξονα Y