Translate funktsiyasi

translate funktsiyasi elementni X o‘qi va Y o‘qi bo‘yicha siljitishni belgilaydi. transform xususiyati bilan birgalikda ishlatiladi. Xususiyat qiymati sifatida har qanday o‘lcham birliklari ishlatilishi mumkin.

Bitta yoki ikkita parametr qabul qilishi mumkin. Agar parametrlar ikkita bo‘lsa - birinchi parametr X o‘qi bo‘yicha siljitishni belgilaydi, ikkinchisi esa - Y o‘qi bo‘yicha. Agar parametr bitta bo‘lsa, u X o‘qi bo‘yicha siljitishni belgilaydi.

Parametrlar qiymatlari musbat yoki manfiy bo‘lishi mumkin. X o‘qi bo‘yicha musbat qiymat o‘ngga siljitadi, manfiy qiymat - chapga. Y o‘qi bo‘yicha musbat qiymat pastga siljitadi, manfiy qiymat - yuqoriga.

Sintaksis

selector {
	transform: translate(X o‘qi bo‘yicha siljish, Y o‘qi bo‘yicha siljish);
}

Misol

Agar blokka sichqonchani olib borilsa - u 30px o‘ngga siljiydi:

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

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

Misol

Agar blokka sichqonchani olib borilsa - u 30px chapga siljiydi:

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

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

Misol

Agar blokka sichqonchani olib borilsa - u 15px o‘ngga va 30px pastga siljiydi:

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

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

Shuningdek qarang

translateX funktsiyasi,
bu X o‘qi bo‘yicha siljitishni belgilaydi
translateY funktsiyasi,
bu Y o‘qi bo‘yicha siljitishni belgilaydi