translate function

translate function သည် အစိတ်အပိုင်းကို X ဝင်ရိုးနှင့် Y ဝင်ရိုးတလျှောက် ရွှေ့ပြောင်းခြင်းကို သတ်မှတ်ပေးသည်။ transform property နှင့်အတူ အသုံးပြုပါသည်။ Property ၏တန်ဖိုးများအဖြစ် အရွယ်အစားအတွက် ယူနစ်များကို သုံးနိုင်သည်။

ပါရာမီတာတစ်ခု သို့မဟုတ် နှစ်ခုကို လက်ခံနိုင်သည်။ အကယ်၍ ပါရာမီတာနှစ်ခုရှိပါက - ပထမပါရာမီတာသည် X ဝင်ရိုးတလျှောက် ရွှေ့ပြောင်းခြင်းကို သတ်မှတ်ပေးပြီး၊ ဒုတိယပါရာမီတာသည် Y ဝင်ရိုးတလျှောက် ရွှေ့ပြောင်းခြင်းကို သတ်မှတ်ပေးသည်။ အကယ်၍ ပါရာမီတာ တစ်ခုသာရှိပါက၊ ၎င်းသည် X ဝင်ရိုးတလျှောက် ရွှေ့ပြောင်းခြင်းကို သတ်မှတ်ပေးသည်။

ပါရာမီတာများ၏တန်ဖိုးများသည် အပြုသဘောဆောင်သော (positive) သို့မဟုတ် အနုတ်လက္ခဏာဆောင်သော (negative) ဖြစ်နိုင်သည်။ X ဝင်ရိုးတလျှောက် အပြုသဘောဆောင်သောတန်ဖိုးသည် ညာဘက်သို့ ရွှေ့ပေးပြီး၊ အနုတ်လက္ခဏာဆောင်သောတန်ဖိုးသည် ဘယ်ဘက်သို့ ရွှေ့ပေးသည်။ Y ဝင်ရိုးတလျှောက် အပြုသဘောဆောင်သောတန်ဖိုးသည် အောက်ဘက်သို့ ရွှေ့ပေးပြီး၊ အနုတ်လက္ခဏာဆောင်သောတန်ဖိုးသည် အပေါ်ဘက်သို့ ရွှေ့ပေးသည်။

Syntax

selector {
	transform: translate(X-axis shift, Y-axis shift);
}

Example

အကယ်၍ box ပေါ်သို့ mouse ဖြင့်ညွှန်ပါက ၎င်းသည် 30px ညာဘက်သို့ ရွှေ့သွားမည်:

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

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

Example

အကယ်၍ box ပေါ်သို့ mouse ဖြင့်ညွှန်ပါက ၎င်းသည် 30px ဘယ်ဘက်သို့ ရွှေ့သွားမည်:

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

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

Example

အကယ်၍ box ပေါ်သို့ mouse ဖြင့်ညွှန်ပါက ၎င်းသည် 15px ညာဘက်သို့ နှင့် 30px အောက်ဘက်သို့ ရွှေ့သွားမည်:

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

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

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

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