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

rotateZ လုပ်ဆောင်ချက်သည် သုံးဖက်မြင် နေရာလွတ်အတွင်း Z ဝင်ရိုးနှင့်ဆိုင်သော လှည့်ပတ်မှုကို သတ်မှတ်ပေးသည်။ ၎င်းကို transform ဂုဏ်သတ္တိနှင့်အတူ အသုံးပြုပါသည်။ ဂုဏ်သတ္တိ၏ တန်ဖိုးသည် မည်သည့် ထောင့်အတွက် ယူနစ် ဖြင့်မဆို ထောင့်တစ်ခု ဖြစ်သည်။ အပေါင်း တန်ဖိုးသည် နာရီလက်တွန်းအတိုင်း လှည့်ပေးပြီး အနုတ်တန်ဖိုးသည် နာရီလက်တွန်းနှင့်ဆန့်ကျင်ဘက် လှည့်ပေးသည်။ လှည့်ပတ်မှုကို transform-origin ဂုဏ်သတ္တိဖြင့် သတ်မှတ်ထားသော အမှတ်ကို ဗဟိုပြု၍ ဆောင်ရွက်သည်။

ဖွဲ့စည်းပုံ

ရွေးချယ်သူ {
	transform: rotateZ(ထောင့်);
}

ဥပမာ

ဤဥပမာတွင် ဘလောက်သည် မောက်စ်ဖြင့်ထောက်ကြည့်ချိန်တွင် Z ဝင်ရိုးအတိုင်း 180 ဒီဂရီ လှည့်သွားမည်။ လှည့်ပတ်မှု ချောမွေ့စေရန် transition ဂုဏ်သတ္တိကို ထည့်သွင်းထားသည်:

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

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

ဥပမာ

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

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

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

ဆက်လက်ဖတ်ရှုရန်

rotate လုပ်ဆောင်ချက်,
ထို လုပ်ဆောင်ချက်သည် X နှင့် Y ဝင်ရိုးများအတိုင်း လှည့်ပတ်မှုကို သတ်မှတ်ပေးသည်
rotateX လုပ်ဆောင်ချက်,
ထို လုပ်ဆောင်ချက်သည် X ဝင်ရိုးအတိုင်း လှည့်ပတ်မှုကို သတ်မှတ်ပေးသည်
rotateY လုပ်ဆောင်ချက်,
ထို လုပ်ဆောင်ချက်သည် Y ဝင်ရိုးအတိုင်း လှည့်ပတ်မှုကို သတ်မှတ်ပေးသည်
rotate3d လုပ်ဆောင်ချက်,
ထို လုပ်ဆောင်ချက်သည် ဝင်ရိုးသုံးခုအတိုင်း လှည့်ပတ်မှုကို သတ်မှတ်ပေးသည်