CSS 2D အသွင်ပြောင်းမှုများ
CSS 2D အသွင်ပြောင်းမှုများ
CSS အသွင်ပြောင်းမှုများသည် သင့်အား ရွှေ့ရန်၊ လှည့်ရန်၊ အတိုင်းအတာနှင့် ဒြပ်စင်များကို လှည့်နိုင်သည်။
2D အသွင်ပြောင်းခြင်းကိုကြည့်ရန် အောက်ပါဒြပ်စင်ပေါ်တွင် မောက်စ်ကိုနှိပ်ပါ-
ဤအခန်းတွင် အောက်ပါ CSS ပိုင်ဆိုင်မှုအကြောင်း လေ့လာရလိမ့်မည်-
transform
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
| Property | |||||
|---|---|---|---|---|---|
| transform | 36.0 |
10.0 |
16.0 |
9.0 |
23.0 |
CSS 2D သည် နည်းလမ်းများကို ပြောင်းလဲသည်။
CSS transformပိုင်ဆိုင်မှုဖြင့် အောက်ပါ 2D အသွင်ပြောင်းနည်းလမ်းများကို သင်အသုံးပြုနိုင်သည်-
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()
အကြံပြုချက်- နောက်အခန်းတွင် 3D အသွင်ပြောင်းမှုများအကြောင်း သင်လေ့လာနိုင်ပါမည်။
ဘာသာပြန်ဆိုခြင်းနည်းလမ်း
နည်းလမ်းသည် ဒြပ်စင်တစ်ခုကို ၎င်း၏ လက်ရှိ translate()အနေအထားမှ (X-ဝင်ရိုးနှင့် Y-ဝင်ရိုးအတွက် ပေးထားသည့် ဘောင်များအတိုင်း) ရွှေ့သည်။
အောက်ပါဥပမာသည် <div> ဒြပ်စင် 50 ပစ်ဇယ်အား ညာဘက်သို့ ရွှေ့ကာ ၎င်း၏လက်ရှိအနေအထားမှ 100 pixels အောက်သို့ ရွှေ့သည်-
ဥပမာ
div
{
transform: translate(50px, 100px);
}
rotate() နည်းလမ်း
နည်းလမ်း သည် rotate()သတ်မှတ်ထားသောဒီဂရီအရ ဒြပ်စင်အား နာရီလက်တံအတိုင်း သို့မဟုတ် နာရီလက်တံအတိုင်း လှည့်သည်။
အောက်ပါဥပမာသည် <div> ဒြပ်စင်အား နာရီလက်တံအတိုင်း 20 ဒီဂရီဖြင့် လှည့်သည်-
ဥပမာ
div
{
transform: rotate(20deg);
}
အနုတ်တန်ဖိုးများကို အသုံးပြုခြင်းဖြင့် ဒြပ်စင်အား နာရီလက်တံပြန်လှည့်ပါမည်။
အောက်ပါဥပမာသည် <div> ဒြပ်စင်အား 20 ဒီဂရီဖြင့် နာရီလက်တံအတိုင်း တန်ပြန်လှည့်သည်-
ဥပမာ
div
{
transform: rotate(-20deg);
}
scale() နည်းလမ်း
နည်းလမ်း သည် scale()ဒြပ်စင်တစ်ခု၏ အရွယ်အစားကို တိုးခြင်း သို့မဟုတ် လျော့ချခြင်း (အနံနှင့် အမြင့်အတွက် ပေးထားသော ကန့်သတ်ဘောင်များအတိုင်း)။
အောက်ဖော်ပြပါ ဥပမာသည် <div> ဒြပ်စင်အား ၎င်း၏ မူရင်းအကျယ်၏ နှစ်ဆနှင့် ၎င်း၏ မူလအမြင့်၏ သုံးဆဖြစ်စေသည်-
ဥပမာ
div
{
transform: scale(2, 3);
}
အောက်ဖော်ပြပါ ဥပမာသည် <div> ဒြပ်စင်အား ၎င်း၏ မူရင်းအကျယ်နှင့် အမြင့်၏ ထက်ဝက်အဖြစ် လျှော့ချပေးသည်-
ဥပမာ
div
{
transform: scale(0.5, 0.5);
}
scaleX() နည်းလမ်း
နည်းလမ်း သည် scaleX()ဒြပ်စင်တစ်ခု၏ အကျယ်ကို တိုးသည် သို့မဟုတ် လျှော့သည်။
အောက်ဖော်ပြပါ ဥပမာသည် <div> ဒြပ်စင်အား ၎င်း၏ မူရင်းအကျယ်၏ နှစ်ဆဖြစ်အောင် တိုးမြှင့်ပေးသည်-
ဥပမာ
div
{
transform: scaleX(2);
}
အောက်ပါဥပမာသည် <div> ဒြပ်စင်အား ၎င်း၏ မူရင်းအကျယ်၏ ထက်ဝက်အဖြစ် လျှော့ချပေးသည်-
ဥပမာ
div
{
transform: scaleX(0.5);
}
scaleY() နည်းလမ်း
နည်းလမ်း သည် scaleY()ဒြပ်စင်တစ်ခု၏ အမြင့်ကို တိုးခြင်း သို့မဟုတ် လျှော့ချသည်။
အောက်ပါဥပမာသည် <div> ဒြပ်စင်အား ၎င်း၏ မူလအမြင့်ထက် သုံးဆတိုးစေသည်-
ဥပမာ
div
{
transform: scaleY(3);
}
အောက်ဖော်ပြပါ ဥပမာသည် <div> ဒြပ်စင်အား ၎င်း၏ မူလအမြင့်၏ ထက်ဝက်သို့ လျှော့ချပေးသည်-
ဥပမာ
div
{
transform: scaleY(0.5);
}
skewX() နည်းလမ်း
နည်းလမ်း သည် skewX()ပေးထားသောထောင့်ဖြင့် X-axis တစ်လျှောက် ဒြပ်စင်တစ်ခုကို လှည့်သည်။
အောက်ပါဥပမာသည် X-axis တစ်လျှောက် <div> ဒြပ်စင်အား 20 ဒီဂရီ စောင်းစေသည်-
ဥပမာ
div
{
transform: skewX(20deg);
}
skewY() နည်းလမ်း
နည်းလမ်း သည် skewY()Y-ဝင်ရိုးတစ်လျှောက် အစိတ်အပိုင်းတစ်ခုကို ပေးထားသောထောင့်ဖြင့် လှည့်သည်။
အောက်ပါဥပမာသည် Y-ဝင်ရိုးတစ်လျှောက် <div> ဒြပ်စင်အား 20 ဒီဂရီ စောင်းစေသည်-
ဥပမာ
div
{
transform: skewY(20deg);
}
skew() နည်းလမ်း
skew()နည်းလမ်းသည် ပေးထားသောထောင့်များဖြင့် X နှင့် Y ဝင်ရိုးတစ်လျှောက် ဒြပ်စင်တစ်ခုကို လှည့်သည် ။
အောက်ပါဥပမာသည် <div> ဒြပ်စင်အား X-axis တစ်လျှောက် 20 ဒီဂရီနှင့် Y-axis တစ်လျှောက် 10 ဒီဂရီ လှည့်သည်-
ဥပမာ
div
{
transform: skew(20deg, 10deg);
}
ဒုတိယဘောင်ကို မသတ်မှတ်ပါက၊ ၎င်းတွင် သုညတန်ဖိုးရှိသည်။ ထို့ကြောင့်၊ အောက်ပါဥပမာသည် X-axis တစ်လျှောက် <div> ဒြပ်စင်အား 20 ဒီဂရီ စောင်းစေသည်-
ဥပမာ
div
{
transform: skew(20deg);
}
matrix() နည်းလမ်း
နည်းလမ်း သည် matrix()2D အသွင်ပြောင်းနည်းလမ်းအားလုံးကို တစ်ခုတည်းအဖြစ် ပေါင်းစပ်ထားသည်။
matrix() method သည် သင် rotate, scale, move (translate) နှင့် skew element များကို ခွင့်ပြုသည့် သင်္ချာလုပ်ဆောင်ချက်များ ပါ၀င်သော ဘောင်ခြောက်ခုကို ယူသည်။
ကန့်သတ်ချက်များမှာ အောက်ပါအတိုင်းဖြစ်သည်- matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
ဥပမာ
div
{
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
CSS Transform Properties
အောက်ပါဇယားသည် 2D အသွင်ပြောင်းခြင်း ဂုဏ်သတ္တိအားလုံးကို စာရင်းပြုစုထားသည်။
| Property | Description |
|---|---|
| transform | Applies a 2D or 3D transformation to an element |
| transform-origin | Allows you to change the position on transformed elements |
CSS 2D အသွင်ပြောင်းနည်းလမ်းများ
| Function | Description |
|---|---|
| matrix(n,n,n,n,n,n) | Defines a 2D transformation, using a matrix of six values |
| translate(x,y) | Defines a 2D translation, moving the element along the X- and the Y-axis |
| translateX(n) | Defines a 2D translation, moving the element along the X-axis |
| translateY(n) | Defines a 2D translation, moving the element along the Y-axis |
| scale(x,y) | Defines a 2D scale transformation, changing the elements width and height |
| scaleX(n) | Defines a 2D scale transformation, changing the element's width |
| scaleY(n) | Defines a 2D scale transformation, changing the element's height |
| rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter |
| skew(x-angle,y-angle) | Defines a 2D skew transformation along the X- and the Y-axis |
| skewX(angle) | Defines a 2D skew transformation along the X-axis |
| skewY(angle) | Defines a 2D skew transformation along the Y-axis |