Συνάρτηση translateY

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

Σύνταξη

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

Παράδειγμα

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

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

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

Παράδειγμα

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

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

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

Δείτε επίσης

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