translateY ශ්‍රිතය

translateY ශ්‍රිතය මූලද්‍රව්‍යය Y අක්ෂය ඔස්සේ මාරු කරයි. භාවිතා වන්නේ transform ගුණාංගය සමඟ එක්ව. ගුණාංගයේ අගය වන්නේ ඕනෑම ප්‍රමාණය සඳහා ඒකක වේ. ධන අගයක් පහළට මාරු කරයි, ඍණ අගයක් - ඉහළට.

වාක්‍ය රීතිය

cssතෝරන්නා {
  transform: translateY(මාරුව);
}

උදාහරණය

මූසිකය බ්ලොක් එක මත තබා ගතහොත් - එය මාරු වේ 30px පහළට:

html<div id="elem"></div>
css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translateY(30px);
}

Результат:

උදාහරණය

මූසිකය බ්ලොක් එක මත තබා ගතහොත් - එය මාරු වේ 30px ඉහළට:

html<div id="elem"></div>
css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translateY(-30px);
}

Результат:

මේවාද බලන්න

  • translate ශ්‍රිතය,
    එය X සහ Y අක්ෂ ඔස්සේ මාරුව නියම කරයි
  • translateX ශ්‍රිතය,
    එය X අක්ෂය ඔස්සේ මාරුව නියම කරයි