CSS3 เปลี่ยนแหล่งกำเนิดสถานที่ให้บริการ
ตัวอย่าง
ชุดวางตำแหน่งจุดองค์ประกอบโรตารี:
{
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
}
ลอง»
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์แรกที่สนับสนุนหมายเลขรุ่นของทรัพย์สิน
ทันทีหลังจาก -webkit- ดิจิตอล -ms- หรือ -moz- ที่ผ่านมาในการสนับสนุนของคำนำหน้าแอตทริบิวต์หมายเลขรุ่นเบราเซอร์แรก
属性 | |||||
---|---|---|---|---|---|
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- |
แอตทริบิวต์คำจำกัดความและคำแนะนำ
เปลี่ยน-กำเนิดแอตทริบิวต์ช่วยให้คุณสามารถเปลี่ยนตำแหน่งขององค์ประกอบการแปลง
องค์ประกอบการแปลง 2D สามารถเปลี่ยน X และแกน Y องค์ประกอบ องค์ประกอบการแปลงภาพ 3 มิติคุณยังสามารถเปลี่ยนองค์ประกอบ Z แกน
เพื่อทำความเข้าใจแอตทริบิวต์ Transform-กำเนิดโปรดดู การสาธิต
หมายเหตุ: คุณสมบัตินี้จะต้อง เปลี่ยน สถานที่ให้บริการ
เคล็ดลับ: ผู้ใช้ Safari / Chrome:เพื่อทำความเข้าใจ 3D เปลี่ยนคุณสมบัติโปรดดู การสาธิต
เริ่มต้น: | 50% 50% 0 |
---|---|
มรดก: | ไม่ |
เวอร์ชัน: | CSS3 |
ไวยากรณ์ javascript: | วัตถุ .style.transformOrigin = "20% 40%" |
ไวยากรณ์
ความคุ้มค่า | ลักษณะ |
---|---|
แกน x | ที่กำหนดเองดูจะถูกวางไว้ที่แกน X ค่าที่เป็นไปได้:
|
แกน y | ดูที่กำหนดเองจะถูกวางไว้ที่แกน Y ค่าที่เป็นไปได้:
|
แกน Z | ที่กำหนดเองดูจะถูกวางไว้ที่แกน Z ค่าที่เป็นไปได้:
|