CSS 2D ပြောင်းလဲ

CSS 2D ပြောင်းလဲ

CSS 转换（transforms）允许您移动、旋转、缩放和倾斜元素。

把鼠标悬停在下面的元素上，可以查看 2D 转换：

2D rotate

在本章中，您将学习如下 CSS 属性：

  • transform

浏览器支持

表格中的数字指注明了完全支持该属性的首个浏览器版本。

အက်ဥပဒေ Chrome IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

CSS 2D အသုံးပြုပြီး အသုံးပြုပြီး အစိတ်အစိတ်ကို ပြောင်းလဲပေးသည်

通过使用 CSS transform 属性，您可以利用以下 2D 转换方法：

  • translate()
  • rotate()
  • scaleX()
  • scaleY()
  • scale()
  • skewX()
  • skewY()
  • skew()
  • matrix()

အကြိုးစားသည်:အောက်ဆုံးစာအုပ်တွင် သင်လိုက်ရန် အပြီးသတ် အခြေခံ အကျယ်အဝန်း ကို လေ့လာပါ:

translate() စနစ်

Translate

translate() ကန်ချိန် အပေါ်မူတည်၍ အကျယ်အဝန်းကို အခြေခံ အရာမှ ပြောင်းလဲစေရန် စနစ်များကို အသုံးပြုပါ (X နှင့် Y အရာ သတ်မှတ်ချက်များ အပေါ်မူတည်၍):

အမှတ်ပြုချက်: <div> အကျယ်အဝန်းကို ၅၀ ပမာဏ ဆယ်ပုံစံ အရောက်သို့ လျှင်ကျရောက်စွာ ပြောင်းလဲစွာ နှင့် ၁၀၀ ပမာဏ ဆယ်ပုံစံ အောက်သို့ လျှင်ကျရောက်စွာ ပြောင်းလဲစွာ ပြောင်းလဲစေရန်:

အမှတ်အသား

div {
  transform: translate(50px, 100px);
}

ကိုယ်တိုင် ကြိုးစားပါ

rotate() စနစ်

Rotate

rotate() အခြေခံ ကန်ချိန် အပေါ်မူတည်၍ အရောက်သို့မဟုတ် ကန်ချိန် ကွဲပြားစွာ ဆိပ်ကြားစွာ အကျယ်အဝန်းကို ဆိပ်ကြားစွာ ပြောင်းလဲစေရန် စနစ်များကို အသုံးပြုပါ:

အမှတ်ပြုချက်: <div> အကျယ်အဝန်းကို ၂၀ ဒီဂရီ ကန်ချိန် အရောက်သို့ ဆိပ်ကြားသွားသည်:

အမှတ်အသား

div {
  transform: rotate(20deg);
}

ကိုယ်တိုင် ကြိုးစားပါ

ကန်ချိန် ပြင်းထန်သော ကြိမ်တမ်း ကို ဆိပ်ကြားစွာ အရောက်သို့ ပြောင်းလဲစေရန် အသုံးပြုပါ:

အမှတ်ပြုချက်: <div> အကျယ်အဝန်းကို ၂၀ ဒီဂရီ ကန်ချိန် ကွဲပြားစွာ ဆိပ်ကြားသွားသည်:

အမှတ်အသား

div {
  transform: rotate(-20deg);
}

ကိုယ်တိုင် ကြိုးစားပါ

scale() စနစ်

Scale

scale() အကျယ်အဝန်းကို တိုးမြှင့်သို့မဟုတ် သန့်ကျင့်ရန် စနစ်များကို တိုးမြှင့်ရန် (အခြေခံ အကျယ်အဝန်း နှင့် အမြင့် သတ်မှတ်ချက်များ အပေါ်မူတည်၍):

အမှတ်ပြုချက်: <div> အကျယ်အဝန်းကို အစိတ်အပိုင်းအဝန်းနှစ်ပုံတစ်ပုံနှင့် အမြင့်ကို အစိတ်အပိုင်းအဝန်းနှစ်ပုံတစ်ပုံသို့ ကျယ်ပြီးခဲ့သည်:

အမှတ်အသား

div {
  transform: scale(2, 3);
}

ကိုယ်တိုင် ကြိုးစားပါ

အမှတ်ပြုချက်: <div> အကျယ်အဝန်းနှင့် အမြင့်ကို အစိတ်အပိုင်းအဝန်းသုံးပုံတစ်ပုံသို့ ကျယ်ပြီးခဲ့သည်:

အမှတ်အသား

div {
  transform: scale(0.5, 0.5);
}

ကိုယ်တိုင် ကြိုးစားပါ

scaleX() စနစ်

scaleX() အကျယ်အဝန်းကို တိုးမြှင့်သို့မဟုတ် သန့်ကျင့်ရန် စနစ်များကို တိုးမြှင့်ရန်:

အမှတ်ပြုချက်: <div> အကျယ်အဝန်းကို အစိတ်အပိုင်းအဝန်းနှစ်ပုံတစ်ပုံသို့ ကျယ်ပြီးခဲ့သည်:

အမှတ်အသား

div {
  transform: scaleX(2);
}

ကိုယ်တိုင် ကြိုးစားပါ

အမှတ်ပြုချက်: <div> အကျယ်အဝန်းကို အစိတ်အပိုင်းအဝန်းသုံးပုံတစ်ပုံသို့ ကျယ်ပြီးခဲ့သည်:

အမှတ်အသား

div {
  transform: scaleX(0.5);
}

ကိုယ်တိုင် ကြိုးစားပါ

scaleY() 方法

scaleY() 方法增加或减少元素的高度。

下面的例子把

元素增大到其原始高度的三倍：

အမှတ်အသား

div {
  transform: scaleY(3);
}

ကိုယ်တိုင် ကြိုးစားပါ

下面的例子把

元素缩减为其原始高度的一半：

အမှတ်အသား

div {
  transform: scaleY(0.5);
}

ကိုယ်တိုင် ကြိုးစားပါ

skewX() 方法

skewX() 方法使元素沿 X 轴倾斜给定角度。

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

အမှတ်အသား

div {
  transform: skewX(20deg);
}

ကိုယ်တိုင် ကြိုးစားပါ

skewY() အက်ဥပဒေ

skewY() အသုံးပြုပြီး အစိတ်အစိတ်ကို အရှိန်အရှိန်သို့ ပြောင်းလဲသည်

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

အမှတ်အသား

div {
  transform: skewY(20deg);
}

ကိုယ်တိုင် ကြိုးစားပါ

skew() အက်ဥပဒေ

skew() အသုံးပြုပြီး အစိတ်အစိတ်ကို အရှိန်အရှိန်သို့ ပြောင်းလဲသည်

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

အမှတ်အသား

div {
  transform: skew(20deg, 10deg);
}

ကိုယ်တိုင် ကြိုးစားပါ

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

အမှတ်အသား

div {
  transform: skew(20deg);
}

ကိုယ်တိုင် ကြိုးစားပါ

matrix() အက်ဥပဒေ

Rotate

matrix() အသုံးပြုပြီး အရာဝတ္တုကို အသုံးပြုပြီး ပြောင်းလဲသည်

matrix() အသုံးပြုပြီး အရာဝတ္တုကို အသုံးပြုပြီး ပြောင်းလဲသည်

သဘောကို ပေးပြီး အရာဝတ္တုကို အသုံးပြုပြီး ပြောင်းလဲသည်

အမှတ်အသား

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

ကိုယ်တိုင် ကြိုးစားပါ

CSS ပြောင်းလဲအက်ဥပဒေ

အောက်ရှိ အချက်အလက်များ အား သုံးဆယ်စက္ကူ ပြောင်းလဲအက်ဥပဒေများ ကို စာရင်းပြုပြီး ရှိပါသည်

အက်ဥပဒေ ဖော်ပြ
transform အစိတ်အစိတ်ကို 2D သို့မဟုတ် 3D အသုံးပြုပြီး အသုံးပြုပြီး အစိတ်အစိတ်ကို ပြောင်းလဲသည်
transform-origin ပြောင်းလဲသည်

CSS 2D အသုံးပြုပြီး အသုံးပြုပြီး အစိတ်အစိတ်ကို ပြောင်းလဲပေးသည်

ပုဂ္ဂိုလ်များ ဖော်ပြ
matrix(n,n,n,n,n,n) သုံးဆယ်စက္ကူ အသုံးပြုပြီး ခြောက်ခု အတိုင်းတာရပ် ကို သတ်မှတ်ပြီး သုံးဆယ်စက္ကူ အသုံးပြုပြီး အစိတ်အစိတ်ကို ပြောင်းလဲသည်။
translate(x,y) သုံးဆယ်စက္ကူ အသုံးပြုပြီး ရှေ့ဆောင် အစိတ်အစိတ်ကို အရှိန်အရှိန်နှင့် ရှေ့ဆောင် အစိတ်အစိတ်ကို ပြောင်းလဲသည်။
translateX(n) သုံးဆယ်စက္ကူ အသုံးပြုပြီး ရှေ့ဆောင် အစိတ်အစိတ်ကို အရှိန်အရှိန်သို့ ပြောင်းလဲသည်။
translateY(n) သုံးဆယ်စက္ကူ အသုံးပြုပြီး ရောက်ရှိသော အက်ဥပဒေကို သတ်မှတ်ပြီး ရှေ့ဆောင် အစိတ်အစိတ်ကို တိုးမြင့်သည်။
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。