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

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

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

selector {
	transform: translateY(shift);
}

ဥပမာ

ဘလောက်ပေါ်သို့ မောက်စ်ဖြင့် နှိပ်လိုက်ပါက ၎င်းသည် အောက်သို့ 30px ရွှေ့သွားမည် -

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

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

ဥပမာ

ဘလောက်ပေါ်သို့ မောက်စ်ဖြင့် နှိပ်လိုက်ပါက ၎င်းသည် အပေါ်သို့ 30px ရွှေ့သွားမည် -

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

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

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

translate လုပ်ဆောင်ချက်,
သည် X နှင့် Y ဝင်ရိုးများတလျှောက် ရွှေ့ခြင်းကို သတ်မှတ်ပေးသည်
translateX လုပ်ဆောင်ချက်,
သည် X ဝင်ရိုးတလျှောက် ရွှေ့ခြင်းကို သတ်မှတ်ပေးသည်