translateX функциясы

translateX функциясы элементти X огу боюнча жылдырат. Ал transform касиети менен бирге колдонулат. Касиеттин мааниси катары өлчөм бирдиктеринин каалаган түрү кызмат кылат. Оң маани оңго жылдырат, терс маани - солго.

Синтаксис

cssтандоочу {
  transform: translateX(жылдыруу);
}

Мисал

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

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

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

Результат:

Мисал

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

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

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

Результат:

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