translate функциясы

translate функциясы элементти X огу жана Y огу боюнча жылдырат. Ал transform касиети менен бирге колдонулат. Касиеттин мааниси катары олчом бирдиктеринин каалаган түрү келтирилиши мүмкүн.

Бир же эки параметр кабыл алышы мүмкүн. Эгерде эки параметр берилсе - биринчи параметр X огу боюнча жылдырууну белгилейт, экинчиси - Y огу боюнча. Эгерде бир гана параметр берилсе, анда ал X огу боюнча жылдырууну белгилейт.

Параметрлердин маанилери оң жана терс болушу мүмкүн. X огу боюнча оң маани оңго жылдырат, терс маани - солго. Y огу боюнча оң маани ылдый жылдырат, терс маани - жогору.

Синтаксис

cssтандоочу {
  transform: translate(X огу боюнча жылдыруу, Y огу боюнча жылдыруу);
}

Мисал

Эгерде блокко чычканды алып барсаңыз - ал 30px оңго жылат:

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

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

Результат:

Мисал

Эгерде блокко чычканды алып барсаңыз - ал 30px солго жылат:

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

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

Результат:

Мисал

Эгерде блокко чычканды алып барсаңыз - ал 15px оңго жана 30px ылдый жылат:

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

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

Результат:

Ошондой эле караңыз