CSS transform-origin thuộc tính

คำแนะนำคอร์ส:

รายละเอียดและวิธีใช้

transform-origin คุณสมบัติสามารถเปลี่ยนแปลงตำแหน่งขององค์ประกอบที่ถูกเปลี่ยนแปลงได้

2D การเปลี่ยนแปลงสามารถเปลี่ยนแปลงปริมาณ x และ y ขององค์ประกอบได้ 3D การเปลี่ยนแปลงสามารถเปลี่ยนแปลงปริมาณ Z ขององค์ประกอบได้แสดง.

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

Safari/Chrome ผู้ใช้: เพื่อเข้าใจคุณสมบัติ transform-origin ในกรณีการเปลี่ยนแปลง 3D ได้ดีขึ้น โปรดดูนี้หมายเหตุ: transform คุณสมบัติที่ใช้ร่วมกัน

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

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

CSS3 คู่มือ:CSS3 2D การเปลี่ยนแปลง

CSS3 คู่มือ:CSS3 3D การเปลี่ยนแปลง

HTML DOM คู่มือ:transformOrigin คุณสมบัติ

ตัวอย่าง

กำหนดตำแหน่งจุดต้นตัวที่จะหมุนองค์ประกอบที่ตั้งต้น:

div {
  transform: rotate(45deg);
  transform-origin: 20% 40%;
}

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

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

CSS 语法

transform-origin: x-axis y-axis z-axis;

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

ค่า รายละเอียด
x-axis

กำหนดที่ที่มุมมองถูกจัดวางที่ไหนของเส้นทาง X ที่เป็นไปได้:

  • left
  • center
  • right
  • length
  • %
y-axis

กำหนดที่ที่มุมมองถูกจัดวางที่ไหนของเส้นทาง Y ที่เป็นไปได้:

  • top
  • center
  • bottom
  • length
  • %
z-axis

กำหนดที่ที่มุมมองถูกจัดวางที่ไหนของเส้นทาง Z ของแนวเส้นตรง Z ที่เป็นไปได้:

  • length

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

ค่าเริ่มต้น： 50% 50% 0
เชื่อมโยง no
版本： CSS3
JavaScript 语法： object.style.transformOrigin="20% 40%"

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

ตัวเลขในตารางบอกว่าคุณสมบัตินี้สนับสนุนโดยเบราเซอร์เวอร์ชั่นแรกที่มีความสามารถอย่างเต็มที่。

ตัวเลขในตารางบอกว่าคุณสมบัตินี้สนับสนุนโดยเบราเซอร์เวอร์ชั่นแรกที่มีความสามารถอย่างเต็มที่。

คุณสมบัติ Chrome IE Firefox Safari Opera
transform-origin
(สายยาว)		 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-origin
(สายสั้น)		 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-