CSS အသွင်ပြောင်းပုံစံ ပိုင်ဆိုင်မှု
ဥပမာ
အသွင်ပြောင်းထားသော ကလေးဒြပ်စင်များသည် 3D အသွင်ပြောင်းမှုများကို ထိန်းသိမ်းထားပါစေ။
div
{
transform: rotateY(60deg);
transform-style: preserve-3d;
}
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
ပိုင်ဆိုင်မှု သည် transform-style
3D space တွင် nested element များကို မည်သို့ပြန်ဆိုသည်ကို သတ်မှတ်ပေးပါသည်။
မှတ်ချက်- ဤပိုင်ဆိုင်မှုကို အသွင်ပြောင်း ထားသော ပိုင်ဆိုင်မှုနှင့် တွဲသုံးရပါမည်။
transform-style
ပိုင်ဆိုင်မှု
ကို ပိုနားလည်ရန် ၊ သရုပ်ပြတစ်ခုကို ကြည့်ပါ ။
မူလတန်ဖိုး: | ပြားချပ် |
---|---|
အမွေဆက်ခံသည်- | မဟုတ်ဘူး |
သက်ဝင်လှုပ်ရှားနိုင်သော | မဟုတ်ဘူး ကာတွန်း အကြောင်းဖတ်ပါ။ |
ဗားရှင်း- | CSS3 |
JavaScript syntax- | အရာဝတ္ထု .style.transformStyle="preserve-3d" |
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
-webkit- သို့မဟုတ် -moz- ဖြင့်လိုက်သောနံပါတ်များကို ရှေ့ဆက်တွဲဖြင့်လုပ်ဆောင်သော ပထမဆုံးဗားရှင်းကို သတ်မှတ်ပါ။
Property | |||||
---|---|---|---|---|---|
transform-style | 36.0 12.0 -webkit- |
11.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
CSS Syntax
transform-style: flat|preserve-3d|initial|inherit;
အိမ်ခြံမြေတန်ဖိုးများ
Property Value | Description |
---|---|
flat | Specifies that child elements will NOT preserve its 3D position. This is default |
preserve-3d | Specifies that child elements will preserve its 3D position |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
ဆက်စပ်စာမျက်နှာများ
CSS သင်ခန်းစာ- CSS 2D အသွင်ပြောင်းမှုများ
CSS သင်ခန်းစာ- CSS 3D အသွင်ပြောင်းမှုများ
HTML DOM ရည်ညွှန်း- transformStyle ပိုင်ဆိုင်မှု