scale ဖန်ရှင်
scale ဖန်ရှင်သည် အချက်၏ အတိုင်းအတာကို ပြောင်းလဲပေးသည်-
၎င်းကို အဆပေါင်းများစွာ ကြီးထွားစေခြင်း သို့မဟုတ် သေးငယ်စေခြင်း ပြုလုပ်နိုင်သည်။
အတိုင်းအတာပြောင်းလဲခြင်းကို transform-origin
ဂုဏ်သတ္တိဖြင့် သတ်မှတ်ပေးထားသော အမှတ်တစ်ခုကို ဗဟိုပြု၍ ဆောင်ရွက်သည်။
ပါရာမီတာ တစ်ခု သို့မဟုတ် နှစ်ခု လက်ခံနိုင်ပြီး၊ ၎င်းတို့ကို ကော်မာဖြင့် ခွဲခြားရေတွက်သည်။ ပါရာမီတာ နှစ်ခု ရှိပါက - ပထမပါရာမီတာသည် ပြင်ညီအတိုင်း (X ဝင်ရိုး) အတိုင်းအတာပြောင်းလဲမှုကို သတ်မှတ်ပေးပြီး၊ ဒုတိယပါရာမီတာသည် ဒေါင်လိုက် (Y ဝင်ရိုး) အတိုင်းအတာပြောင်းလဲမှုကို သတ်မှတ်ပေးသည်။ ပါရာမီတာ တစ်ခုတည်းသာ ရှိပါက၊ ၎င်းသည် ပြင်ညီနှင့် ဒေါင်လိုက် နှစ်ခုစလုံးအတွက် တပြိုင်နက် အတိုင်းအတာပြောင်းလဲမှုကို သတ်မှတ်ပေးသည်။
ပါရာမီတာများ၏ တန်ဖိုးမှာ ကိန်းပြည့် သို့မဟုတ် ကိန်းရှင် (အပိုင်းကိန်း) ဖြစ်သည်။
၎င်းသည် 1 ထက် ကြီးပါက အချက်သည် ကြီးထွားလာမည်၊
၎င်းသည် ငယ်ပါက (ဥပမာ၊ 0.5) - အချက်သည်
သေးငယ်သွားမည်။ 1 ဟု သတ်မှတ်ပါက ဘာမှ ပြောင်းလဲမှုမရှိပါ
(၎င်းသည် စံသတ်မှတ်ချက် တန်ဖိုးပင် ဖြစ်သည်)။
ဝါကျဖွဲ့စည်းပုံ
ဆယ်လက်တာ {
transform: scale(ကိန်းတစ်ခု သို့မဟုတ် နှစ်ခု);
}
ဥပမာ
ဘလောက်ပေါ်သို့ မောက်စ်ဖြင့်တင်၍ နှစ်ဝင်ရိုးစလုံးအတွက် အတိုင်းအတာကို 1.5
ဆဖြင့် ကြီးထွားစေမည်-
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1.5);
}
:
ဥပမာ
နှစ်ဝင်ရိုးစလုံးအတွက် အတိုင်းအတာကို 2 ဆဖြင့် သေးငယ်စေမည်-
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(0.5);
}
:
ဥပမာ
X ဝင်ရိုးအတွက် အတိုင်းအတာကို 2 ဆဖြင့် ကြီးထွားစေမည်-
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(2, 1);
}
:
ဥပမာ
Y ဝင်ရိုးအတွက် အတိုင်းအတာကို 2 ဆဖြင့် ကြီးထွားစေမည်-
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1, 2);
}
:
