transform-origin ဂုဏ်သတ္တိ
transform-origin ဂုဏ်သတ္တိသည် အမှတ်တစ်ခုကို သတ်မှတ်ပေးပြီး
ထိုအမှတ်အား မူတည်၍ transform ဂုဏ်သတ္တိဖြင့်
သတ်မှတ်သော အရာဝတ္ထု၏ ပြောင်းလဲမှုများ ဖြစ်ပေါ်မည်ဖြစ်သည်။
မူလအတိုင်းဆိုလျှင် ဤအမှတ်သည် အရာဝတ္ထု၏ ဗဟို ဖြစ်ပြီး
ဥပမာအားဖြင့် လှည့်ပတ်မှုသည် ၎င်း၏ဗဟိုအား မူတည်၍ ဖြစ်ပေါ်မည်။
သို့သော် ဤအပြုအမူကို ပြောင်းလဲနိုင်ပြီး အရာဝတ္ထုအား ၎င်း၏
ဘေးဘက်၊ ထောင့် သို့မဟုတ် အရာဝတ္ထု၏ အပြင်ဘက်တွင်ရှိသော
အမှတ်တစ်ခုအား မူတည်၍ လှည့်ပတ်စေနိုင်သည်။
ဝါကျဖွဲ့စည်းပုံ
selector {
transform-origin: X-axis Y-axis Z-axis;
}
Y ဝင်ရိုး နှင့် Z ဝင်ရိုး အတွက် တန်ဖိုးများသည် မဖြစ်မနေပေးရန် မလိုအပ်ပါ၊ ၎င်းတို့အား ချန်လှပ်ထားနိုင်သည် (၎င်းတို့သည် မူလအတိုင်း တန်ဖိုးများကို ယူကြမည်)။ Z ဝင်ရိုးတလျှောက် အမှတ်၏ အရွေ့သည် 3D ပြောင်းလဲမှုများအတွက် လိုအပ်သည်။
X ဝင်ရိုးအတွက် တန်ဖိုးများ
| တန်ဖိုး | ဖော်ပြချက် |
|---|---|
| CSS ယူနစ်များ | တန်ဖိုးအဖြစ် အရာဝတ္ထု၏ ဘယ်ဘက်နယ်နမိုးမှ ပြောင်းလဲမှုဗဟို၏ အကွာအဝေးကို သတ်မှတ်ပေးသော မည်သည့် အရွယ်အစားများအတွက် ယူနစ် မဆို ဖြစ်နိုင်သည်။ အပြုသဘောဆောင်သော တန်ဖိုးသည် ပြောင်းလဲမှုဗဟိုအား ညာဘက်သို့ (အရာဝတ္ထုအတွင်းဘက်သို့) ရွေ့စေပြီး အပျက်သဘောဆောင်သော တန်ဖိုးသည် ဘယ်ဘက်သို့ (အရာဝတ္ထု၏ အပြင်ဘက်သို့) ရွေ့စေသည်။ |
left |
အရာဝတ္ထု၏ ဘယ်ဘက်နယ်နမိုးတွင် ရှိသော အလျားလိုက် လှည့်ပတ်မှုအမှတ်။ |
right |
အရာဝတ္ထု၏ ညာဘက်နယ်နမိုးတွင် ရှိသော အလျားလိုက် လှည့်ပတ်မှုအမှတ်။ |
center |
အရာဝတ္ထု၏ ဗဟိုတွင် ရှိသော အလျားလိုက် လှည့်ပတ်မှုအမှတ်။ |
မူလအတိုင်း တန်ဖိုး: center.
Y ဝင်ရိုးအတွက် တန်ဖိုးများ
| တန်ဖိုး | ဖော်ပြချက် |
|---|---|
| CSS ယူနစ်များ | တန်ဖိုးအဖြစ် အရာဝတ္ထု၏ အပေါ်ဘက်နယ်နမိုးမှ ပြောင်းလဲမှုဗဟို၏ အကွာအဝေးကို သတ်မှတ်ပေးသော မည်သည့် အရွယ်အစားများအတွက် ယူနစ် မဆို ဖြစ်နိုင်သည်။ အပြုသဘောဆောင်သော တန်ဖိုးသည် ပြောင်းလဲမှုဗဟိုအား အောက်ဘက်သို့ (အရာဝတ္ထုအတွင်းဘက်သို့) ရွေ့စေပြီး အပျက်သဘောဆောင်သော တန်ဖိုးသည် အပေါ်ဘက်သို့ (အရာဝတ္ထု၏ အပြင်ဘက်သို့) ရွေ့စေသည်။ |
top |
အရာဝတ္ထု၏ အပေါ်ဘက်နယ်နမိုးတွင် ရှိသော ဒေါင်လိုက် လှည့်ပတ်မှုအမှတ်။ |
bottom |
အရာဝတ္ထု၏ အောက်ဘက်နယ်နမိုးတွင် ရှိသော ဒေါင်လိုက် လှည့်ပတ်မှုအမှတ်။ |
center |
အရာဝတ္ထု၏ ဗဟိုတွင် ရှိသော ဒေါင်လိုက် လှည့်ပတ်မှုအမှတ်။ |
မူလအတိုင်း တန်ဖိုး: center.
Z ဝင်ရိုးအတွက် တန်ဖိုးများ
| တန်ဖိုး | ဖော်ပြချက် |
|---|---|
| CSS ယူနစ်များ | တန်ဖိုးအဖြစ် အရာဝတ္ထု၏ မျက်နှာပြင်မှ ပြောင်းလဲမှုဗဟို၏ အကွာအဝေးကို သတ်မှတ်ပေးသော မည်သည့် အရွယ်အစားများအတွက် ယူနစ် မဆို ဖြစ်နိုင်သည်။ အပြုသဘောဆောင်သော တန်ဖိုးသည် ၎င်းအား ကျွန်ုပ်တို့ဘက်သို့ (မျက်နှာပြင်မှ) ရွေ့စေပြီး အပျက်သဘောဆောင်သော တန်ဖိုးသည် ကျွန်ုပ်တို့မှ ဝေးရာသို့ ရွေ့စေသည်။ |
မူလအတိုင်း တန်ဖိုး: 0px.
ဥပမာ
ယခု transform-origin ဂုဏ်သတ္တိ၏ တန်ဖိုးကို မသတ်မှတ်ထားသောကြောင့် ဘလောက်သည် ၎င်း၏ဗဟိုအား မူတည်၍ လှည့်ပတ်မည်။ အကျိုးသက်ရောက်မှုကို မြင်တွေ့ရန် ဘလောက်ပေါ်သို့ မောက်စ်ကို နှိပ်ချက်ပေးပါ:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
ဥပမာ
ယခု နှိပ်ချက်ပေးသောအခါ ဘလောက်သည် အပေါ်ဘက်ဘယ်ထောင့်အား မူတည်၍ လှည့်ပတ်မည်:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
ဥပမာ
ယခု နှိပ်ချက်ပေးသောအခါ ဘလောက်သည် ညာဘက်အောက်ထောင့်အား
မူတည်၍ လှည့်ပတ်မည်။ ဤအတွက် ပြောင်းလဲမှုအမှတ်အား ညာဘက်သို့ 100%
နှင့် အောက်ဘက်သို့ 100% ရွေ့ရမည် (px ဖြင့်လည်း သတ်မှတ်နိုင်သော်လည်း
အရာဝတ္ထု၏ အရွယ်အစား ပြောင်းလဲသောအခါ ပြောင်းလဲမှုအမှတ်သည် တည်နေရာတွင် ကျန်ရစ်နေမည်ဖြစ်သဖြင့်
% ဖြင့် ပြုလုပ်ခြင်းက ပိုကောင်းသည်):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
ဥပမာ
ဘလောက်အား ညာဘက်အပေါ်ထောင့်အား မူတည်၍ လှည့်ပတ်မည်:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
ဥပမာ
ဘလောက်အား ဘယ်ဘက်အလယ်ဗဟိုအား မူတည်၍ လှည့်ပတ်မည်။
ဤအတွက် X ဝင်ရိုးအတွက် left ဟု သတ်မှတ်ပါမည် (လှည့်ပတ်မှုအမှတ်သည် ဘယ်ဘက်တွင် ရှိမည်)
ထို့နောက် Y ဝင်ရိုးအတွက် center ဟု သတ်မှတ်ပါမည်
(လှည့်ပတ်မှုအမှတ်သည် ဒေါင်လိုက်ဗဟိုတွင် ရှိမည်):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
ဥပမာ
ဂုဏ်သတ္တိကို လှည့်ပတ်မှုအတွက်သာမက
အခြားပြောင်းလဲမှုများအတွက်လည်း သတ်မှတ်နိုင်သည်။
scale ကိုအသုံးပြု၍ ပြောင်းလဲမှုအမှတ်ကို ဘယ်ဘက်အောက်ထောင့်အဖြစ်
သတ်မှတ်ကာ အရွယ်အစားကို ချဲ့ထွင်ကြည့်ရအောင်:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left bottom;
transform: scale(1.5);
}
:
ဥပမာ
ယခု ပြောင်းလဲမှုအမှတ်ကို ညာဘက်အပေါ်ထောင့်အဖြစ် သတ်မှတ်ပါမည်:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: right top;
transform: scale(1.5);
}
:
ဥပမာ
ပြောင်းလဲမှုအမှတ်ကို အရာဝတ္ထု၏ အပြင်ဘက်တွင်လည်း သတ်မှတ်နိုင်သည်။ အောက်ပါဥပမာတွင် အနီရောင်ဘလောက်ပေါ်သို့ မောက်စ်နှိပ်ချက်ပေးသောအခါ အနက်ရောင်ဘလောက်သည် အပြင်ဘက်တွင်ရှိသော အမှတ်တစ်ခုအား မူတည်၍ လှည့်ပတ်မှုကို ဆောင်ရွက်မည်:
<div id="hover"></div>
<div id="elem"></div>
#hover {
border: 1px solid red;
width: 50px;
height: 50px;
}
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
transition: transform 1s;
transform-origin: -100px -100px;
}
#hover:hover + #elem {
transform: rotate(30deg);
}
:
