translateY funktsiyasi

translateY funktsiyasi elementni Y o‘qi bo‘yicha siljitishni belgilaydi. U transform xususiyati bilan birgalikda ishlatiladi. Xususiyat qiymati sifatida o‘lcham birliklarining istalgan turi ishlatilishi mumkin. Musbat qiymat pastga, manfiy qiymat esa yuqoriga siljitadi.

Sintaksis

cssselector {
  transform: translateY(siljish);
}

Misol

Agar blokka sichqonchani olib borilsa, u 30px pastga siljiydi:

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

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

Результат:

Misol

Agar blokka sichqonchani olib borilsa, u 30px yuqoriga siljiydi:

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

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

Результат:

Shuningdek qarang