CSS3 transform-origin Property

ตัวอย่าง

ตั้งค่าการกำหนดฐานเป็นองค์ประกอบของการหมุน:

div {
    -ms-transform: rotate(45deg); /* IE 9 */
    -ms-transform-origin: 20% 40%; /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    -webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    transform-origin: 20% 40%;
}

ลองตัวเอง»

ความหมายและการใช้งาน

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

แปลง 2D สามารถเปลี่ยนแกน X และแกน y ขององค์ประกอบ แปลง 3D ยังสามารถเปลี่ยนแกน Z ขององค์ประกอบ

เพื่อทำความเข้าใจคุณสมบัติเปลี่ยนแหล่งกำเนิด, ดูการสาธิต

Note: คุณสมบัตินี้จะต้องใช้ร่วมกับการ เปลี่ยน สถานที่ให้บริการ

Tip: เพื่อทำความเข้าใจคุณสมบัตินี้สำหรับ 3D แปลง, ดูการสาธิต

ค่าเริ่มต้น:	50% 50% 0
รับการถ่ายทอด:	no
Animatable:	yes. Read about animatable Try it
เวอร์ชัน:	CSS3
ไวยากรณ์ javascript:	object .style.transformOrigin="0 0" Try it

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

ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน

ตามด้วยหมายเลข -webkit-, -moz- หรือ -o- ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า

คุณสมบัติ
transform-origin (two-value syntax)	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 (three-value syntax)	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	9.0 4.0 -webkit-	23.0 15.0 -webkit-

CSS ไวยากรณ์

transform-origin:x-axis y-axis z-axis|initial|inherit;

ค่าทรัพย์สิน

มูลค่าทรัพย์สิน	ลักษณะ
x-axis	กำหนดมุมมองที่ถูกวางไว้ที่แกน x ค่าที่เป็นไปได้: ซ้าย ศูนย์ ขวา length %
y-axis	กำหนดมุมมองที่ถูกวางไว้ที่แกน y ค่าที่เป็นไปได้: ด้านบน ศูนย์ ด้านล่าง length %
z-axis	กำหนดมุมมองที่ถูกวางไว้ที่แกน Z (for 3D transformations) ค่าที่เป็นไปได้: length
แรกเริ่ม	การตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น
สืบทอด	สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก

หน้าเว็บที่เกี่ยวข้อง

กวดวิชา CSS: CSS 2D แปลง

กวดวิชา CSS: CSS 3D แปลง

อ้างอิง HTML DOM: transformOrigin property

❮ก่อนหน้า ถัดไป❯

CSS การอ้างอิง