စက်တင်ချိန် အချင်းပြတ် ရှိသော အစက်သုံးအသုံး အချင်းပြတ် ရှိသော အစက်သုံးအသုံး

ဖော်ပြ နှင့် အသုံးပြု

transform-origin ဖောင်း ကို ပြောင်းလဲမှု အရာများ အား အခြေအနေ ပြောင်းလဲစေနိုင်ပါ

2D ပြောင်းလဲမှု အရာများ အား x နှင့် y အရာများ ပြောင်းလဲစေနိုင်ပြီး 3D ပြောင်းလဲမှု အရာများ အား Z အရာများ ပြောင်းလဲစေနိုင်ပြီး

transform-origin ဖောင်း ကို ကြိုးစားသုံးစွဲကြည့်ပါပြသ.

Safari/Chrome အသုံးပြုသူများ: transform-origin ဖောင်း ကို 3D ပြောင်းလဲမှု အတွက် ကြိုးစားသုံးစွဲကြည့်ပါပြသ.

ဖော်ပြ:ဖောင်း ကို transform ဖောင်း နှင့် အသုံးပြု

transform ဖောင်း ကို ကြိုးစားသုံးစွဲကြည့်ပါပြသ.

အခြား ကြည့်ရန်:

CSS3 ဖော်ပြCSS3 2D 转换

CSS3 ဖော်ပြCSS3 3D 转换

HTML DOM လက်တွေးချုပ်transformOrigin ဖောင်း

အမှတ်အသား

အာရုံစိုက်ရာ အရာများ ကို ပြင်ဆင်သည့် အခြေအနေကို သတ်မှတ်ပါ

div {
  transform: rotate(45deg);
  transform-origin: 20% 40%;
}

ကျွန်ုပ်ကိုယ်ဖြင့် ကြိုးစားကြည့်ပါ

အချက်အလက် အချင်းချင်း ပြသည်။

CSS ဘဏ္ဍာရေး

transform-origin: x-axis y-axis z-axis;

ဖောင်း အတိုင်း

အတိုင်း ဖော်ပြ
x-axis

အခြေအနေ ကို X အရာများ အတွင်း တည်ရှိသည် ကို ဖော်ပြသည်။ အခြား အတိုင်းများ:

  • ရှေ့
  • အလယ်
  • သို့မဟုတ်
  • length
  • %
y-axis

အခြေအနေ ကို Y အရာများ အတွင်း တည်ရှိသည် ကို ဖော်ပြသည်။ အခြား အတိုင်းများ:

  • အပေါ်
  • အလယ်
  • အောက်
  • length
  • %
z-axis

အခြေအနေ ကို Z အရာများ အတွင်း တည်ရှိသည် ကို ဖော်ပြသည်။ အခြား အတိုင်းများ:

  • length

နည်းပါးလုံး

မူကြမ်း အတိုင်း: 50% 50% 0
တိုက်ရိုက်ထုတ်လုပ်: no
ပုံစံ: CSS3
JavaScript ဘဏ္ဍာရေး: object.style.transformOrigin="20% 40%"

ဘူးငါးပံ့

အချက်အလက်များတွင် ဖောင်းအား အထူးသဖြင့် ထောက်ပံ့သော ပထမဆုံး ဘူးငါးပုံစံကို ပြောဆိုသည်。

ဖောင်း -webkit-、-moz- သို့မဟုတ် -ms- ဖြင့် အသုံးပြုသော ပထမဆုံး ပုံစံကို ပြောဆိုသည်。

ဖောင်း Chrome IE Firefox Safari Opera
transform-origin
(နှစ်ဘဏ္ဍာရေး)		 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-origin
(သုံးဘဏ္ဍာရေး)		 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-