transform-origin ဂုဏ်သတ္တိ

transform-origin ဂုဏ်သတ္တိသည် အမှတ်တစ်ခုကို သတ်မှတ်ပေးပြီး ထိုအမှတ်အား မူတည်၍ transform ဂုဏ်သတ္တိဖြင့် သတ်မှတ်သော အရာဝတ္ထု၏ ပြောင်းလဲမှုများ ဖြစ်ပေါ်မည်ဖြစ်သည်။ မူလအတိုင်းဆိုလျှင် ဤအမှတ်သည် အရာဝတ္ထု၏ ဗဟို ဖြစ်ပြီး ဥပမာအားဖြင့် လှည့်ပတ်မှုသည် ၎င်း၏ဗဟိုအား မူတည်၍ ဖြစ်ပေါ်မည်။ သို့သော် ဤအပြုအမူကို ပြောင်းလဲနိုင်ပြီး အရာဝတ္ထုအား ၎င်း၏ ဘေးဘက်၊ ထောင့် သို့မဟုတ် အရာဝတ္ထု၏ အပြင်ဘက်တွင်ရှိသော အမှတ်တစ်ခုအား မူတည်၍ လှည့်ပတ်စေနိုင်သည်။

ဝါကျဖွဲ့စည်းပုံ

cssselector {
  transform-origin: X-axis Y-axis Z-axis;
}

Y ဝင်ရိုး နှင့် Z ဝင်ရိုး အတွက် တန်ဖိုးများသည် မဖြစ်မနေပေးရန် မလိုအပ်ပါ၊ ၎င်းတို့အား ချန်လှပ်ထားနိုင်သည် (၎င်းတို့သည် မူလအတိုင်း တန်ဖိုးများကို ယူကြမည်)။ Z ဝင်ရိုးတလျှောက် အမှတ်၏ အရွေ့သည် 3D ပြောင်းလဲမှုများအတွက် လိုအပ်သည်။

X ဝင်ရိုးအတွက် တန်ဖိုးများ

မူလအတိုင်း တန်ဖိုး: center.

Y ဝင်ရိုးအတွက် တန်ဖိုးများ

မူလအတိုင်း တန်ဖိုး: center.

Z ဝင်ရိုးအတွက် တန်ဖိုးများ

မူလအတိုင်း တန်ဖိုး: 0px.

ဥပမာ

ယခု transform-origin ဂုဏ်သတ္တိ၏ တန်ဖိုးကို မသတ်မှတ်ထားသောကြောင့် ဘလောက်သည် ၎င်း၏ဗဟိုအား မူတည်၍ လှည့်ပတ်မည်။ အကျိုးသက်ရောက်မှုကို မြင်တွေ့ရန် ဘလောက်ပေါ်သို့ မောက်စ်ကို နှိပ်ချက်ပေးပါ:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: center center;
  transform: rotate(30deg);
}

Результат:

ဥပမာ

ယခု နှိပ်ချက်ပေးသောအခါ ဘလောက်သည် အပေါ်ဘက်ဘယ်ထောင့်အား မူတည်၍ လှည့်ပတ်မည်:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: 0px 0px;
  transform: rotate(30deg);
}

Результат:

ဥပမာ

ယခု နှိပ်ချက်ပေးသောအခါ ဘလောက်သည် ညာဘက်အောက်ထောင့်အား မူတည်၍ လှည့်ပတ်မည်။ ဤအတွက် ပြောင်းလဲမှုအမှတ်အား ညာဘက်သို့ 100% နှင့် အောက်ဘက်သို့ 100% ရွေ့ရမည် (px ဖြင့်လည်း သတ်မှတ်နိုင်သော်လည်း အရာဝတ္ထု၏ အရွယ်အစား ပြောင်းလဲသောအခါ ပြောင်းလဲမှုအမှတ်သည် တည်နေရာတွင် ကျန်ရစ်နေမည်ဖြစ်သဖြင့် % ဖြင့် ပြုလုပ်ခြင်းက ပိုကောင်းသည်):

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: 100% 100%;
  transform: rotate(30deg);
}

Результат:

ဥပမာ

ဘလောက်အား ညာဘက်အပေါ်ထောင့်အား မူတည်၍ လှည့်ပတ်မည်:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: 100% 0%;
  transform: rotate(30deg);
}

Результат:

ဥပမာ

ဘလောက်အား ဘယ်ဘက်အလယ်ဗဟိုအား မူတည်၍ လှည့်ပတ်မည်။ ဤအတွက် X ဝင်ရိုးအတွက် left ဟု သတ်မှတ်ပါမည် (လှည့်ပတ်မှုအမှတ်သည် ဘယ်ဘက်တွင် ရှိမည်) ထို့နောက် Y ဝင်ရိုးအတွက် center ဟု သတ်မှတ်ပါမည် (လှည့်ပတ်မှုအမှတ်သည် ဒေါင်လိုက်ဗဟိုတွင် ရှိမည်):

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: left center;
  transform: rotate(30deg);
}

Результат:

ဥပမာ

ဂုဏ်သတ္တိကို လှည့်ပတ်မှုအတွက်သာမက အခြားပြောင်းလဲမှုများအတွက်လည်း သတ်မှတ်နိုင်သည်။ scale ကိုအသုံးပြု၍ ပြောင်းလဲမှုအမှတ်ကို ဘယ်ဘက်အောက်ထောင့်အဖြစ် သတ်မှတ်ကာ အရွယ်အစားကို ချဲ့ထွင်ကြည့်ရအောင်:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: left bottom;
  transform: scale(1.5);
}

Результат:

ဥပမာ

ယခု ပြောင်းလဲမှုအမှတ်ကို ညာဘက်အပေါ်ထောင့်အဖြစ် သတ်မှတ်ပါမည်:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: right top;
  transform: scale(1.5);
}

Результат:

ဥပမာ

ပြောင်းလဲမှုအမှတ်ကို အရာဝတ္ထု၏ အပြင်ဘက်တွင်လည်း သတ်မှတ်နိုင်သည်။ အောက်ပါဥပမာတွင် အနီရောင်ဘလောက်ပေါ်သို့ မောက်စ်နှိပ်ချက်ပေးသောအခါ အနက်ရောင်ဘလောက်သည် အပြင်ဘက်တွင်ရှိသော အမှတ်တစ်ခုအား မူတည်၍ လှည့်ပတ်မှုကို ဆောင်ရွက်မည်:

html<div id="hover"></div>
<div id="elem"></div>

css#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);
}

Результат: