คุณสมบัติการแปลงที่มาของ CSS
ตัวอย่าง
กำหนดตำแหน่งฐานขององค์ประกอบที่หมุน:
div
{
transform: rotate(45deg);
transform-origin: 20% 40%;
}
ความหมายและการใช้งาน
คุณสมบัติtransform-origin
ช่วยให้คุณเปลี่ยนตำแหน่งขององค์ประกอบที่แปลงแล้ว
การแปลง 2D สามารถเปลี่ยนแกน x และ y ขององค์ประกอบได้ การแปลง 3D ยังเปลี่ยนแกน z ขององค์ประกอบได้อีกด้วย
เพื่อทำความเข้าใจtransform-origin
คุณสมบัติให้
ดีขึ้น ให้ดู การสาธิต
หมายเหตุ:คุณสมบัตินี้ต้องใช้ร่วมกับ คุณสมบัติ การ แปลง
เคล็ดลับ:เพื่อให้เข้าใจคุณสมบัตินี้มากขึ้นสำหรับการแปลง 3 มิติให้ ดูการสาธิต
ค่าเริ่มต้น: | 50% 50% 0 |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ใช่. อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS3 |
ไวยากรณ์ JavaScript: | วัตถุ .style.transformOrigin="0 0" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
ตัวเลขตามด้วย -webkit-, -moz- หรือ -o- ระบุเวอร์ชันแรกที่ทำงานกับคำนำหน้า
Property | |||||
---|---|---|---|---|---|
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;
มูลค่าทรัพย์สิน
Property Value | Description |
---|---|
x-axis | Defines where the view is placed at the x-axis. Possible values:
|
y-axis | Defines where the view is placed at the y-axis. Possible values:
|
z-axis | Defines where the view is placed at the z-axis (for 3D transformations). Possible values:
|
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: CSS 2D Transforms
กวดวิชา CSS: CSS 3D Transforms
การอ้างอิง HTML DOM: คุณสมบัติ transformOrigin