คุณภาพ CSS transform attribute

การนิยามและการใช้งาน

คุณสมบัติ transform ใช้สำหรับใช้งานการเปลี่ยนแปลง 2D หรือ 3D ต่อองค์ประกอบ สามารถทำการหมุน ย่อยยาว ย้ายตำแหน่ง หรือทันทางองค์ประกอบได้

เพื่อเข้าใจคุณสมบัติ transform มากยิ่งขึ้น โปรดดูนี้การแสดงนี้。

ดูเพิ่มเติมที่:

ตัวอย่าง CSS3การเปลี่ยนแปลง 2D ของ CSS3

ตัวอย่าง CSS3การเปลี่ยนแปลง 3D ของ CSS3

คู่มือ HTML DOMตัวแปร transform

ตัวอย่าง

การหมุน element div:

div
{
transform:rotate(7deg);
}

ลองทดลองด้วยตัวเอง

มีตัวอย่างเพิ่มเติมที่ด้านล่างของหน้า。

CSS การใช้งาน

transform: none|transform-functions;

ค่าคุณสมบัติ

ค่า การอธิบาย การทดสอบ
none นิยามการไม่ทำการเปลี่ยนแปลง。 การทดสอบ
matrix(n,n,n,n,n,n) นิยามการเปลี่ยนแปลง 2D โดยใช้แบบฟอร์มด้วยค่าหกตัวเลข。 การทดสอบ
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) นิยามการเปลี่ยนแปลง 3D โดยใช้แบบฟอร์ม 4x4 ด้วยค่า 16 ตัวเลข。
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) กำหนดการหมุน 3D ตามตัวย่อง X การทดสอบ
rotateY(angle) กำหนดการหมุน 3D ตามตัวย่อง Y การทดสอบ
rotateZ(angle) กำหนดการหมุน 3D ตามตัวย่อง Z การทดสอบ
skew(x-angle,y-angle) กำหนดการเลื่อนทาง 2D ตามตัวย่อง X และ Y การทดสอบ
skewX(angle) กำหนดการเลื่อนทาง 2D ตามตัวย่อง X การทดสอบ
skewY(angle) กำหนดการเลื่อนทาง 2D ตามตัวย่อง Y การทดสอบ
perspective(n) กำหนดมุมมองโพรเจกทอร์สำหรับองค์ประกอบการเลื่อนทาง 3D การทดสอบ

รายละเอียดเทคโนโลยี

ค่าเริ่มต้น: none
เชื่อมโยง: no
เวอร์ชั่น: CSS3
JavaScript กรรมศาสตร์: object.style.transform="rotate(7deg)"

ตัวอย่างเพิ่มเติม

ภาพที่ทิ้งลงบนโต๊ะ
ตัวอย่างนี้แสดงว่าวิธีที่จะสร้างภาพบ๊อลลี่และหมุนภาพ

การสนับสนุนเบราเซอร์

ตัวเลขในตารางบอกว่าเบราเซอร์แรกที่สนับสนุนคุณสมบัตินี้

ตัวเลขที่มี -webkit-、-moz- หรือ -ms- แสดงว่าใช้เบอร์โฟร์ต์เวอร์สที่มีหน้าที่ในหน้าใหม่

属性 Chrome IE / Edge Firefox Safari Opera
transform (2D) 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform (3D) 36.0
12.0 -webkit-		 12.0 10.0 9.0
4.0 -webkit-		 23.0
15.0 -webkit-