translateY လုပ်ဆောင်ချက်

translateY လုပ်ဆောင်ချက်သည် Y ဝင်ရိုးတလျှောက် အစိတ်အပိုင်းကို ရွှေ့ခြင်းကို သတ်မှတ်ပေးသည်။ transform ဂုဏ်သတ္တိနှင့်အတူ တွဲဖက်အသုံးပြုသည်။ ဂုဏ်သတ္တိ၏တန်ဖိုးအဖြစ် မည်သည့် အရွယ်အစားအတွက် ယူနစ် ကိုမဆို အသုံးပြုနိုင်သည်။ အပေါင်း တန်ဖိုးသည် အောက်သို့ ရွှေ့ပေးပြီး၊ အနှုတ် တန်ဖိုးသည် အပေါ်သို့ ရွှေ့ပေးသည်။

ဝါကျဖွဲ့စည်းပုံ

cssselector {
  transform: translateY(shift);
}

ဥပမာ

ဘလောက်ပေါ်သို့ မောက်စ်ဖြင့် နှိပ်လိုက်ပါက ၎င်းသည် အောက်သို့ 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);
}

Результат:

ဆက်လက်လေ့လာရန်