Συνάρτηση translate
Η συνάρτηση translate ορίζει τη μετατόπιση ενός στοιχείου
κατά τον άξονα X και τον άξονα Y. Χρησιμοποιείται μαζί
με την ιδιότητα transform.
Ως τιμές της ιδιότητας μπορούν να χρησιμοποιηθούν οποιεσδήποτε μονάδες
μεγέθους.
Μπορεί να δεχτεί μία ή δύο παραμέτρους. Αν οι παράμετροι είναι δύο - η πρώτη παράμετρος ορίζει τη μετατόπιση κατά τον άξονα X, και η δεύτερη - κατά τον άξονα Y. Αν η παράμετρος είναι μία, τότε ορίζει τη μετατόπιση κατά τον άξονα X.
Οι τιμές των παραμέτρων μπορεί να είναι θετικές και αρνητικές. Μια θετική τιμή κατά τον άξονα X μετατοπίζει προς τα δεξιά, μια αρνητική - προς τα αριστερά. Μια θετική τιμή κατά τον άξονα Y μετατοπίζει προς τα κάτω, μια αρνητική - προς τα πάνω.
Σύνταξη
επιλογέας {
transform: translate(μετατόπιση κατά X, μετατόπιση κατά Y);
}
Παράδειγμα
Αν το ποντίκι περάσει πάνω από το μπλοκ - αυτό θα μετατοπιστεί
30px προς τα δεξιά:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translate(30px);
}
:
Παράδειγμα
Αν το ποντίκι περάσει πάνω από το μπλοκ - αυτό θα μετατοπιστεί
30px προς τα αριστερά:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translate(-30px);
}
:
Παράδειγμα
Αν το ποντίκι περάσει πάνω από το μπλοκ - αυτό θα μετατοπιστεί
15px προς τα δεξιά και 30px προς τα κάτω:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translate(15px, 30px);
}
:
Δείτε επίσης
-
τη συνάρτηση
translateX,
που ορίζει μετατόπιση κατά τον άξονα X -
τη συνάρτηση
translateY,
που ορίζει μετατόπιση κατά τον άξονα Y