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