စီစ်တိုက် 3D ပြောင်းလဲ

စီစ်တိုက် 3D ပြောင်းလဲ

စတီအီစ် ၃၅ ဒီဂရီ ပြောင်းလဲမှု ကို လည်း ထောက်ပံ့သည်။

အောက်ပါ အရာများ အပေါ် မိုးစက်ကို လွှတ်ပေးပါ ၂၅ ဒီဂရီ နှင့် ၃၆ ဒီဂရီ ပြောင်းလဲမှု အကြား အမှီအသား မြင်ပါ:

2D rotate
3D rotate

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

  • transform

浏览器支持

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

အခြေအနေ Chrome IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

CSS 3D ပြောင်းလဲခြင်း နည်းလမ်း

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

  • rotateX()
  • rotateY()
  • rotateZ()

rotateX() 方法

X ရိုက်ချဲ့

rotateX() 方法使元素绕其 X 轴旋转给定角度：

အမှတ်

#myDiv {
  transform: rotateX(150deg);
}

ကျွန်ုပ်တို့ ကျယ်ပြန်လုပ်ပါ

rotateY() နည်းလမ်း

Y ရိုက်ချဲ့

rotateY() အရာဝတ္တု ကို ဒီ Y အရာဝတ္တု အ�း ချဲ့ချက် ပြုလုပ်ခြင်း အား အသုံးပြုပါသည့် နည်းလမ်းကို ပြောဆိုပါ。

အမှတ်

#myDiv {
  transform: rotateY(130deg);
}

ကျွန်ုပ်တို့ ကျယ်ပြန်လုပ်ပါ

rotateZ() နည်းလမ်း

rotateZ() အရာဝတ္တု ကို ဒီ Z အရာဝတ္တု အား ချဲ့ချက် ပြုလုပ်ခြင်း အား အသုံးပြုပါသည့် နည်းလမ်းကို ပြောဆိုပါ。

အမှတ်

#myDiv {
  transform: rotateZ(90deg);
}

ကျွန်ုပ်တို့ ကျယ်ပြန်လုပ်ပါ

CSS ပြောင်းလဲခ�င်း အခြေအနေ

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

အခြေအနေ ဖော်ပြ
transform အရာဝတ္တု ကို ၂D သို့မဟုတ် ၃D ပြောင်းလဲခ�င်း ကို အသုံးပြုပါ。
transform-origin ပြောင်းလဲခြင်း ပြုလုပ်ခြင်း အရာဝတ္တု ကို ပြောင်းလဲပေးပါ。
transform-style ပြည့်ပြည်း ပြည့်ပြည်း အရာဝတ္တု ကို ကွဲပြားစေသော အရာဝတ္တု ကို ကြေညာပါ。
perspective ဒီ 3D အရာဝတ္တု ကို ကြည့်ရန် အရာဝတ္တု အခြေအနေ ကြေညာပါ。
perspective-origin ဒီ 3D အရာဝတ္တု ကို ခြောက်လျှောက် နေသော အရာဝတ္တု အခြေခံ အရာဝတ္တု အခြေအနေ ကြေညာပါ。
backface-visibility အရာဝတ္တု ကို အချုပ်ကို ရှိသော် ဘယ်လို မြင်ကြားသလဲလို ကြေညာပါ。

CSS 3D ပြောင်းလဲခြင်း နည်းလမ်း

ပုံ ဖော်ပြ
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)		 ဒီ 3D ပြောင်းလဲခ�င်း ကို ၁၆ ပုံ ကို အသုံးပြုသော ၄x၄ စကန်း သုံးပါ。
translate3d(x,y,z) ဒီ 3D ပြောင်းလဲခ�င်း ကို ကြေညာပါ。
translateX(x) ဒီ 3D ပြောင်းလဲခ�င်း ကို သီးခြား X အရာဝတ္တု ကို အသုံးပြုပါ。
translateY(y) ဒီ 3D ပြောင်းလဲခ�င်း ကို သီးခြား Y အရာဝတ္တု ကို အသုံးပြုပါ。
translateZ(z) ဒီ 3D ပြောင်းလဲခ�င်း ကို သီးခြား Z အရာဝတ္တု ကို အသုံးပြုပါ。
scale3d(x,y,z) ဒီ 3D ကုန်းစစ် ပြောင်းလဲခ�င်း ကို ကြေညာပါ。
scaleX(x) ဒီ 3D ကုန်းစစ် ပြောင်းလဲခ�င်း ကို ဒီ X အရာဝတ္တု ကို ချဲ့ချက် ပြုလုပ်ပါ。
scaleY(y) ဒီ 3D ကုန်းစစ် ပြောင်းလဲခြင်း ကို ဒီ Y အရာဝတ္တု ကို ချဲ့ချက် ပြုလုပ်ပါ。
scaleZ(z) ဒီ 3D ကုန်းစစ် ပြောင်းလဲခြင်း ကို ဒီ Z အရာဝတ္တု ကို ချဲ့ချက် ပြုလုပ်ပါ。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。