Συνάρτηση 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