Style transform คุณสมบัติ
- หน้าก่อน top
- หน้าต่อไป transformOrigin
- กลับไปยังเพศก์เดิม HTML DOM Style 对象
คำนำออกและการใช้งาน
transform คุณสมบัตินี้ใช้ในการปรับส่วนที่เป็น 2D หรือ 3D ที่ใช้ในองค์ประกอบต่างๆ นี้ มีความหมายว่าคุณสามารถทำการหมุน ยกขยาย ย้ายที่ หรือนับแบบฝังในองค์ประกอบต่างๆ โดยใช้ตัวบวกและลบ
อ่านเพิ่มเติม:
คู่มือ CSS อ้างอิง:คุณสมบัติ transform
ตัวอย่าง
ทบทวน div อิเล็กทรอนิกส์:
document.getElementById("myDIV").style.transform = "rotate(7deg)";
รูปแบบ
กลับค่า transform:
object.style.transform
ตั้งคุณสมบัติ transform:
object.style.transform = "none|transform-functions|initial|inherit"
ค่าของคุณสมบัติ
| ค่า | การอธิบาย |
|---|---|
| none | กำหนดว่าไม่มีการเลื่อน |
| matrix(n, n, n, n, n, n) | ใช้แบบตารางที่มีหกตัวเลขเพื่อกำหนดการเลื่อนสองมิติ |
| matrix3d(n, n, n, n, etc....) | ใช้แบบตาราง 4x4 จาก 16 ตัวเลขเพื่อกำหนดการเลื่อน 3D |
| translate(x, y) | กำหนดการเลื่อน 2D |
| translate3d(x, y, z) | กำหนดการเลื่อน 3D |
| translateX(x) | กำหนดการเลื่อนโดยใช้ค่าของตัวอักษร Xเท่านั้น |
| translateY(y) | กำหนดการเลื่อนโดยใช้ค่าของตัวอักษร Yเท่านั้น |
| translateZ(z) | กำหนดการเลื่อน 3D โดยใช้ค่าของตัวอักษร Zเท่านั้น |
| scale(x, y) | กำหนดการเปลี่ยนโหลยานา 2D |
| scale3d(x, y, z) | กำหนดการเปลี่ยนโหลยานา 3D |
| scaleX(x) | กำหนดการเปลี่ยนโหลยานาโดยให้ค่าในตัวอักษร X |
| scaleY(y) | กำหนดการเปลี่ยนโหลยานาโดยให้ค่าในตัวอักษร Y |
| scaleZ(z) | กำหนดการเปลี่ยนโหลยานาทาง 3D โดยให้ค่าในตัวอักษร Z |
| rotate(angle) | กำหนดการหมุน 2D โดยกำหนดมุมในตัวอักษร |
| rotate3d(x, y, z, angle) | กำหนดการหมุน 3D |
| rotateX(angle) | กำหนดการหมุนทางแนว X ของการหมุน 3D |
| rotateY(angle) | กำหนดการหมุนทางแนว Y ของการหมุน 3D |
| rotateZ(angle) | กำหนดการหมุนทางแนว Z ของการหมุน 3D |
| skew(x-angle, y-angle) | กำหนดการเลื่อนทางแนว X และ Y ของการเลื่อนทางแนว 2D |
| skewX(angle) | กำหนดการเลื่อนทางแนว X ของการเลื่อนทางแนว 2D |
| skewY(angle) | กำหนดการเลื่อนทางแนว Y ของการเลื่อนทางแนว 2D |
| perspective(n) | กำหนดโพรเซพทิฟความยืดหย่องขององค์ประกอบ 3D ที่แสดง |
| initial | ตั้งคุณสมบัตินี้เป็นค่าเริ่มต้นของมัน。ดู initial。 |
| inherit | สืบทอดคุณสมบัตินี้จากองค์ประกอบพ่อของเขา。ดู inherit。 |
รายละเอียดเทคนิค
| ค่าเริ่มต้น: | ไม่มี |
|---|---|
| ค่าที่กลับมา: | ตัวอักษรสายที่แสดง คุณสมบัติ transform。 |
| เวอร์ชั่น CSS: | CSS3 |
การสนับสนุนบราวเซอร์
ตัวเลขในตารางระบุการแสดงของเวอร์ชั่นบราวเซอร์ที่สนับสนุนคุณสมบัตินี้ครบถ้วน。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 36.0 | 10.0 | 16.0 | 9.0 | 23.0 |
- หน้าก่อน top
- หน้าต่อไป transformOrigin
- กลับไปยังเพศก์เดิม HTML DOM Style 对象
