translate Fonksiyonu

translate fonksiyonu, bir elemanı X ve Y eksenleri boyunca öteler. transform özelliği ile birlikte kullanılır. Değer olarak herhangi bir boyut birimi kullanılabilir.

Bir veya iki parametre alabilir. Eğer iki parametre varsa - ilk parametre X ekseni boyunca, ikinci parametre ise Y ekseni boyunca ötelemeyi belirler. Eğer parametre tek ise, X ekseni boyunca ötelemeyi belirler.

Parametre değerleri pozitif veya negatif olabilir. X eksenindeki pozitif bir değer sağa, negatif bir değer ise sola doğru öteler. Y eksenindeki pozitif bir değer aşağıya, negatif bir değer ise yukarıya doğru öteler.

Sözdizimi

seçici {
	transform: translate(X ekseni ötelemesi, Y ekseni ötelemesi);
}

Örnek

Fare ile kutunun üzerine gelindiğinde, kutu 30px sağa doğru ötelenecektir:

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

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

Örnek

Fare ile kutunun üzerine gelindiğinde, kutu 30px sola doğru ötelenecektir:

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

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

Örnek

Fare ile kutunun üzerine gelindiğinde, kutu 15px sağa ve 30px aşağıya doğru ötelenecektir:

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

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

Ayrıca Bakınız

X ekseni boyunca öteleme yapan translateX
fonksiyonu
Y ekseni boyunca öteleme yapan translateY
fonksiyonu