TranslateX funktsiyasi

translateX funktsiyasi elementni X o‘qi bo‘yicha siljitadi. transform xususiyati bilan birgalikda ishlatiladi. Qiymati sifatida o‘lcham birliklarining istalgan turi ishlatilishi mumkin. Musbat qiymat o‘ngga, manfiy qiymat chapga siljitadi.

Sintaksis

cssselector {
  transform: translateX(siljish);
}

Misol

Agar blokka sichqonchani olib borsangiz - u 30px o‘ngga siljiydi:

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

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

Результат:

Misol

Agar blokka sichqonchani olib borsangiz - u 30px chapga siljiydi:

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

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

Результат:

Shuningdek