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 огу боюнча жылдырууну белгилейт