CSS အားကောင်းအားကောင်း ဖောက်ထုတ်ရာ အရာ
- ပြီးပိုင်း အထပ်
- ထပ်ပိုင်း transform-origin
定义和用法
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
transform ဗဟို သုံးသပ်ခြင်း ကို ကြည့်ပါပြန်လည်ထူးခြင်း。
အခြား ကို ကျွန်းစားပါ
CSS3 အစီအစဉ်CSS3 2D အားကောင်းအားကောင်း
CSS3 အစီအစဉ်CSS3 3D အားကောင်းအားကောင်း
HTML DOM လက်ဗီဒီယိုများtransform ဗဟို
အမှတ်အသား
div အရာ ကို ကျန်းမာစွာ ကျော်ကြားပါ။
div
{
transform:rotate(7deg);
}
စာကြိုး အောက်တွင် အများအပြား အကျိုးသက်မှုများ ရှိပါသည်။
CSS ဘာသာစကား
transform: none|transform-functions;
ဗဟို ဈေး
| ဈေး | ဖော်ပြ | စစ်ဆေး |
|---|---|---|
| none | ပြောင်းလဲခြင်း မ မရှိ ကို အသုံးပြုပါ။ | စစ်ဆေး |
| matrix(n,n,n,n,n,n) | 2D ပြောင်းလဲခြင်း ကို ခွဲခြား ကို အသုံးပြုပါ။ | စစ်ဆေး |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 3D ပြောင်းလဲခြင်း ကို ၄x၄ စကန်း ၁၆ ဈေး ကို အသုံးပြုပါ။ | |
| translate(x,y) | 2D လှည့်ပတ် အား သတ်မှတ်ပါ။ | စစ်ဆေး |
| translate3d(x,y,z) | 3D လှည့်ပတ် အား သတ်မှတ်ပါ။ | |
| translateX(x) | X အား သတ်မှတ်ပါ။ | စစ်ဆေး |
| translateY(y) | အားကစား အား သတ်မှတ်ပါ။ | စစ်ဆေး |
| translateZ(z) | 3D လှည့်ပတ် အား သတ်မှတ်ပါ။ | |
| scale(x,y) | 2D လှည့်ပတ် အား သတ်မှတ်ပါ။ | စစ်ဆေး |
| scale3d(x,y,z) | 3D လှည့်ပတ် အား သတ်မှတ်ပါ။ | |
| scaleX(x) | X အရာကွာ အစီအစဉ် အား သတ်မှတ်ပါ။ | စစ်ဆေး |
| scaleY(y) | Y အရာကွာ အစီအစဉ် အား သတ်မှတ်ပါ။ | စစ်ဆေး |
| scaleZ(z) | Z အရာကွာ 3D လှည့်ပတ် အား သတ်မှတ်ပါ။ | |
| rotate(angle) | အာရှိပ် အား သတ်မှတ်ပါ။ | စစ်ဆေး |
| rotate3d(x,y,z,angle) | 3D လှည့်ပတ် အား သတ်မှတ်ပါ။ | |
| rotateX(angle) | X အရာကွာ 3D လှည့်ပတ် အား သတ်မှတ်ပါ။ | စစ်ဆေး |
| rotateY(angle) | Y အရာကွာ 3D လှည့်ပတ် အား သတ်မှတ်ပါ။ | စစ်ဆေး |
| rotateZ(angle) | Z အရာကွာ 3D လှည့်ပတ် အား သတ်မှတ်ပါ။ | စစ်ဆေး |
| skew(x-angle,y-angle) | X နှင့် Y အရာကွာ 2D လှည့်ပတ် အား သတ်မှတ်ပါ။ | စစ်ဆေး |
| skewX(angle) | X အရာကွာ 2D လှည့်ပတ် အာ� သတ်မှတ်ပါ။ | စစ်ဆေး |
| skewY(angle) | Y အရာကွာ 2D လှည့်ပတ် အား သတ်မှတ်ပါ။ | စစ်ဆေး |
| perspective(n) | 3D လှည့်ပတ်ပုံ အာရှိပ် အား သတ်မှတ်ပါ။ | စစ်ဆေး |
နည်းပါးများ
| မနှုတ်ချက် | none |
|---|---|
| ကူးကြောင်းမှု | no |
| ပုံစံ | CSS3 |
| JavaScript အသုံးပြုခြင်း | object.style.transform="rotate(7deg)" |
အခြား အမှတ်အသား
- အပေါ်ပေါ်ရှိ ဓါတ်ပုံ
- “ဘာလို” ဓါတ်ပုံ ကို ဖန်တီးပြီး ဓါတ်ပုံ ကို အာရှိပ်ပေးပါ။
ဘာသာပြန် အထောက်အကူ
စာရင်းအရ အမှတ်များ သည် အိမ်စား ဘာသာပြန်များ ကို ပြောကြားသည်။
ကြောင်းဖြင့် -webkit- သို့မဟုတ် -moz- သို့မဟုတ် -ms- ဖြင့် အစတွင်းပါ နှုတ်ချက်များ အသုံးပြုသည်。
| ရှိခြင်း | Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| transform (2D) | 36.0 4.0 -webkit- |
10.0 9.0 -ms- |
16.0 3.5 -moz- |
9.0 3.2 -webkit- |
23.0 15.0 -webkit- 10.5 -o- |
| transform (3D) | 36.0 12.0 -webkit- |
12.0 | 10.0 | 9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
- ပြီးပိုင်း အထပ်
- ထပ်ပိုင်း transform-origin
