scale ဖန်ရှင်

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

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

ပါရာမီတာများ၏ တန်ဖိုးမှာ ကိန်းပြည့် သို့မဟုတ် ကိန်းရှင် (အပိုင်းကိန်း) ဖြစ်သည်။ ၎င်းသည် 1 ထက် ကြီးပါက အချက်သည် ကြီးထွားလာမည်၊ ၎င်းသည် ငယ်ပါက (ဥပမာ၊ 0.5) - အချက်သည် သေးငယ်သွားမည်။ 1 ဟု သတ်မှတ်ပါက ဘာမှ ပြောင်းလဲမှုမရှိပါ (၎င်းသည် စံသတ်မှတ်ချက် တန်ဖိုးပင် ဖြစ်သည်)။

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

cssဆယ်လက်တာ {
  transform: scale(ကိန်းတစ်ခု သို့မဟုတ် နှစ်ခု);
}

ဥပမာ

ဘလောက်ပေါ်သို့ မောက်စ်ဖြင့်တင်၍ နှစ်ဝင်ရိုးစလုံးအတွက် အတိုင်းအတာကို 1.5 ဆဖြင့် ကြီးထွားစေမည်-

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

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(1.5);
}

Результат:

ဥပမာ

နှစ်ဝင်ရိုးစလုံးအတွက် အတိုင်းအတာကို 2 ဆဖြင့် သေးငယ်စေမည်-

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

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(0.5);
}

Результат:

ဥပမာ

X ဝင်ရိုးအတွက် အတိုင်းအတာကို 2 ဆဖြင့် ကြီးထွားစေမည်-

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

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(2, 1);
}

Результат:

ဥပမာ

Y ဝင်ရိုးအတွက် အတိုင်းအတာကို 2 ဆဖြင့် ကြီးထွားစေမည်-

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

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(1, 2);
}

Результат:

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