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

rotateY လုပ်ဆောင်ချက်သည် သုံးဖက်မြင် space တွင် Y ဝင်ရိုးနှင့်အညီ လှည့်ခြင်းကို သတ်မှတ်ပေးသည်။ ၎င်းကို transform property နှင့်အတူ အသုံးပြုသည်။ Property ၏တန်ဖိုးအနေဖြင့် ထောင့်များအတွက် ယူနစ်များထဲမှ မည်သည့်ထောင့်တန်ဖိုးမဆို ဖြစ်နိုင်သည်။ အပြုသဘောဆောင်သော တန်ဖိုးသည် ကျွန်ုပ်တို့ဘက်သို့ လှည့်ပေးပြီး အပျက်သဘောဆောင်သော တန်ဖိုးသည် ကျွန်ုပ်တို့မှ ဝေးရာဘက်သို့ လှည့်ပေးသည်။ လှည့်ခြင်းကို transform-origin property ဖြင့် သတ်မှတ်ပေးထားသောအမှတ်ကို ဗဟိုပြု၍ ဆောင်ရွက်သည်။

ဖွဲ့စည်းပုံ

selector {
	transform: rotateY(angle);
}

နမူနာ

ဤနမူနာတွင် block ကို Y ဝင်ရိုးနှင့်အညီ 180 degree လှည့်ရန် သတ်မှတ်ထားသည်။ ချောမွေ့စွာလှည့်နိုင်ရန်အတွက် transition property ကို ထည့်သွင်းထားသည်။

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

#elem {
	border: 3px solid black;
	width: 100px;
	height: 50px;
	transition: transform 3s linear;
}
#elem:hover {
	transform: rotateY(180deg);
}

နမူနာ

transform-origin property ကို အသုံးပြု၍ လည်ပတ်သည့်ဝင်ရိုးကို ပြောင်းလဲကြည့်ရအောင်။

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

#elem {
	border: 3px solid black;
	width: 100px;
	height: 50px;
	transition: transform 3s linear;
	transform-origin: right center;
}
#elem:hover {
	transform: rotateY(180deg);
}

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

rotate လုပ်ဆောင်ချက်၊
သည် X နှင့် Y ဝင်ရိုးများနှင့်အညီ လှည့်ခြင်းကို သတ်မှတ်ပေးသည်။
rotateX လုပ်ဆောင်ချက်၊
သည် X ဝင်ရိုးနှင့်အညီ လှည့်ခြင်းကို သတ်မှတ်ပေးသည်။
rotateZ လုပ်ဆောင်ချက်၊
သည် Z ဝင်ရိုးနှင့်အညီ လှည့်ခြင်းကို သတ်မှတ်ပေးသည်။
rotate3d လုပ်ဆောင်ချက်၊
သည် ဝင်ရိုးသုံးခုနှင့်အညီ လှည့်ခြင်းကို သတ်မှတ်ပေးသည်။