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

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

ဖွဲ့စည်းပုံ

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

ဥပမာ

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

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

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

Результат:

ဥပမာ

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

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

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

Результат:

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