Функсияи 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 таъин мекунад