Translate funktsiyasi

translate funktsiyasi elementni X o‘qi va Y o‘qi bo‘yicha siljitishni belgilaydi. transform xususiyati bilan birgalikda ishlatiladi. Xususiyat qiymati sifatida har qanday o‘lcham birliklari ishlatilishi mumkin.

Bitta yoki ikkita parametr qabul qilishi mumkin. Agar parametrlar ikkita bo‘lsa - birinchi parametr X o‘qi bo‘yicha siljitishni belgilaydi, ikkinchisi esa - Y o‘qi bo‘yicha. Agar parametr bitta bo‘lsa, u X o‘qi bo‘yicha siljitishni belgilaydi.

Parametrlar qiymatlari musbat yoki manfiy bo‘lishi mumkin. X o‘qi bo‘yicha musbat qiymat o‘ngga siljitadi, manfiy qiymat - chapga. Y o‘qi bo‘yicha musbat qiymat pastga siljitadi, manfiy qiymat - yuqoriga.

Sintaksis

cssselector {
  transform: translate(X o‘qi bo‘yicha siljish, Y o‘qi bo‘yicha siljish);
}

Misol

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

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

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

Результат:

Misol

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

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

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

Результат:

Misol

Agar blokka sichqonchani olib borilsa - u 15px o‘ngga va 30px pastga siljiydi:

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

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

Результат:

Shuningdek qarang