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 осі бойынша жылжытуды белгілейді