CSS การเปลี่ยนแปลง 3D
- หน้าก่อน CSS การเปลี่ยนแปลง 2D
- หน้าต่อไป CSS การเปลี่ยนแปลง
CSS การเปลี่ยนแปลง 3D
CSS ยังสนับสนุนการเปลี่ยนแปลง 3D:
กรุณาเคลื่อนที่เมาส์บนอิเล็มด้านล่าง เพื่อดูความแตกต่างระหว่างการทำการเปลี่ยนแปลง 2D และ 3D:
2D rotate
2D rotate
3D rotate
transform
ในบทนี้คุณจะเรียนรู้ถึงทางเลือก CSS ต่อไปนี้
การสนับสนุนเบราเซอร์
| ทางเลือก | ตัวเลขในตารางแสดงว่าอัตราการสนับสนุนทางเลือกนี้ของเบราเซอร์ในรุ่นแรกที่สนับสนุนอย่างเต็มที่ | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| transform | 36.0 | 10.0 | 16.0 | 9.0 | 23.0 |
วิธีการเปลี่ยนแปลง 3D CSS
ผ่าน CSS transform ทางเลือก，คุณสามารถใช้วิธีการเปลี่ยนแปลง 3D ต่อไปนี้
rotateX()rotateY()rotateZ()
rotateX() ฟังก์ชัน
rotateX() ฟังก์ชันที่ทำให้องค์ประกอบหมุนตาม X แบบฐาน
ตัวอย่าง
#myDiv {
transform: rotateX(150deg);
}
rotateY() ฟังก์ชัน
rotateY() ฟังก์ชันที่ทำให้องค์ประกอบหมุนตาม Y แบบฐาน
ตัวอย่าง
#myDiv {
transform: rotateY(130deg);
}
rotateZ() ฟังก์ชัน
rotateZ() วิธีที่ทำให้องค์ประกอบหมุนตาม Z แบบฐาน
ตัวอย่าง
#myDiv {
transform: rotateZ(90deg);
}
ทางเลือก CSS การเปลี่ยนแปลง
ตารางด้านล่างแสดงทั้งหมดทางเลือกของการเปลี่ยนแปลง 3D
| ทางเลือก | รายละเอียด |
|---|---|
| transform | ใช้ 2D หรือ 3D การเปลี่ยนแปลงที่ถูกกำหนดให้กับองค์ประกอบ |
| transform-origin | อนุญาตให้คุณเปลี่ยนตำแหน่งขององค์ประกอบที่ถูกเปลี่ยนแปลง |
| transform-style | กำหนดวิธีที่องค์ประกอบที่ถูกวงจรวางลงในชั้นหลังจะแสดงออกในชั้น 3D |
| perspective | กำหนดสรรพทางที่ขององค์ประกอบ 3D |
| perspective-origin | กำหนดตำแหน่งด้านล่างขององค์ประกอบ 3D |
| backface-visibility | definir ว่าตัวองค์ประกอบควรแสดงหรือไม่เมื่อมีสภาพที่ไม่เกิดต่อหน้าหนึ่งของหน้าจอ |
วิธีการเปลี่ยนแปลง 3D CSS
| ฟังก์ชัน | รายละเอียด |
|---|---|
| matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) |
definir การเปลี่ยนแปลง 3D โดยใช้ตาราง 4x4 จำนวน 16 ตัวเลข |
| translate3d(x,y,z) | definir การแปลง 3D |
| translateX(x) | definir การแปลง 3D โดยใช้ค่า X เดียว |
| translateY(y) | definir การแปลง 3D โดยใช้ค่า Y เดียว |
| translateZ(z) | definir การแปลง 3D โดยใช้ค่า Z เดียว |
| scale3d(x,y,z) | definir ปรับขนาด 3D |
| scaleX(x) | definir ปรับขนาด 3D โดยใช้ค่า X แบบฐาน |
| scaleY(y) | definir ปรับขนาด 3D โดยใช้ค่า Y แบบฐาน |
| scaleZ(z) | definir ปรับขนาด 3D โดยใช้ค่า Z แบบฐาน |
| rotate3d(x,y,z,angle) | นิยามการหมุน 3D |
| rotateX(angle) | นิยามการหมุน 3D ตามตัวโค้ง X |
| rotateY(angle) | นิยามการหมุน 3D ตามตัวโค้ง Y |
| rotateZ(angle) | นิยามการหมุน 3D ตามตัวโค้ง Z |
| perspective(n) | นิยามมุมมองโพรสเพรสพีฟท์ขององค์ประกอบที่มีการเปลี่ยนแปลง 3D |
- หน้าก่อน CSS การเปลี่ยนแปลง 2D
- หน้าต่อไป CSS การเปลี่ยนแปลง
