translate функцияси

translate функцияси элементни X ва Y ўқи бўйича силжитишни белгилайди. transform хусусияти билан бирга ишлатилади. Хусусиятнинг қиймати сифатида ҳажм учун бирликлар ишлатилади.

Битта ёки иккита параметр қабул қилиши мумкин. Агар параметрлар иккита бўлса - биринчи параметр X ўқи бўйича силжитишни белгилайди, иккинчиси эса Y ўқи бўйича. Агар параметр битта бўлса, у Х ўқи бўйича силжитишни белгилайди.

Параметрларнинг қийматлари мусбат ва манфий бўлиши мумкин. Х ўқи бўйича мусбат қиймат ўнгга силжитади, манфий қиймат - чапга. 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 ўқи бўйича силжитишни белгилайди