คุณสมบัติ transform-origin
คุณสมบัติ transform-origin กำหนดจุด
ที่การแปลงขององค์ประกอบซึ่งกำหนดโดยคุณสมบัติ transform จะเกิดขึ้น
โดยอ้างอิงจากจุดนี้
โดยค่าเริ่มต้น จุดนี้คือ ศูนย์กลางขององค์ประกอบ
และตัวอย่างเช่น การหมุนจะเกิดขึ้นโดยอ้างอิงจาก
ศูนย์กลางของมัน อย่างไรก็ตาม เราสามารถเปลี่ยนพฤติกรรมนี้ได้
และทำให้องค์ประกอบหมุนโดยอ้างอิงจาก
ด้านข้างของตัวเอง มุมของตัวเอง หรือแม้กระทั่งอ้างอิงจาก
จุดที่อยู่นอกองค์ประกอบ
ไวยากรณ์
ตัวเลือก {
transform-origin: แกน-X แกน-Y แกน-Z;
}
ค่าบนแกน Y และ Z ไม่ใช่ค่าบังคับ สามารถละเว้นได้ (พวกมันจะรับค่า ตามค่าเริ่มต้น) การเลื่อนจุดบนแกน Z จำเป็นสำหรับ การแปลงแบบ 3D
ค่าสำหรับแกน X
| ค่า | คำอธิบาย |
|---|---|
| หน่วย CSS | ค่าเป็น หน่วยสำหรับขนาด ใดๆ ซึ่งกำหนดระยะห่างของศูนย์กลางการแปลงจากขอบซ้ายขององค์ประกอบ ค่าบวกจะเลื่อนศูนย์กลางการแปลงไปทางขวา (เข้าไปในองค์ประกอบ) ส่วนค่าลบจะเลื่อนไปทางซ้าย (ออกไปนอกองค์ประกอบ) โดยอ้างอิงจากขอบซ้ายขององค์ประกอบ |
left |
จุดหมุนในแนวนอนบนขอบซ้ายขององค์ประกอบ |
right |
จุดหมุนในแนวนอนบนขอบขวาขององค์ประกอบ |
center |
จุดหมุนในแนวนอนที่ศูนย์กลางขององค์ประกอบ |
ค่าเริ่มต้น: center
ค่าสำหรับแกน Y
| ค่า | คำอธิบาย |
|---|---|
| หน่วย CSS | ค่าเป็น หน่วยสำหรับขนาด ใดๆ ซึ่งกำหนดระยะห่างของศูนย์กลางการแปลงจากขอบบนขององค์ประกอบ ค่าบวกจะเลื่อนศูนย์กลางการแปลงลง (เข้าไปในองค์ประกอบ) ส่วนค่าลบจะเลื่อนขึ้น (ออกไปนอกองค์ประกอบ) โดยอ้างอิงจากขอบบนขององค์ประกอบ |
top |
จุดหมุนในแนวตั้งบนขอบบนขององค์ประกอบ |
bottom |
จุดหมุนในแนวตั้งบนขอบล่างขององค์ประกอบ |
center |
จุดหมุนในแนวตั้งที่ศูนย์กลางขององค์ประกอบ |
ค่าเริ่มต้น: center
ค่าบนแกน Z
| ค่า | คำอธิบาย |
|---|---|
| หน่วย CSS | ค่าเป็น หน่วยสำหรับขนาด ใดๆ ซึ่งกำหนดระยะห่างของศูนย์กลางการแปลงจากระนาบขององค์ประกอบ ค่าบวกจะเลื่อนมันเข้าหาเรา (ออกจากระนาบหน้าจอ) ส่วนค่าลบจะเลื่อนออกจากเรา |
ค่าเริ่มต้น: 0px
ตัวอย่าง
ตอนนี้ค่าของคุณสมบัติ transform-origin ยังไม่ได้กำหนดไว้ และบล็อกจะหมุนโดยอ้างอิงจาก ศูนย์กลางของตัวเอง วางเมาส์เหนือบล็อกเพื่อ เห็นเอฟเฟกต์:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
ตัวอย่าง
และตอนนี้เมื่อวางเมาส์ บล็อกจะหมุนโดยอ้างอิงจาก มุมซ้ายบน:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
ตัวอย่าง
และตอนนี้เมื่อวางเมาส์ บล็อกจะหมุนโดยอ้างอิงจาก
มุมขวาล่าง เพื่อทำเช่นนี้ ควรกำหนด
จุดการแปลงให้ห่าง 100% ไปทางขวา
และ 100% ลงไป (สามารถกำหนดเป็น
px ได้เช่นกัน แต่หากขนาดองค์ประกอบเปลี่ยน
จุดการแปลงจะยังคงอยู่ที่เดิม
ดังนั้นควรทำเป็น % จะดีกว่า):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
ตัวอย่าง
หมุนบล็อกโดยอ้างอิงจากมุมขวาบน:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
ตัวอย่าง
หมุนบล็อกโดยอ้างอิงจากศูนย์กลางด้านซ้าย
สำหรับสิ่งนี้ สำหรับแกน X กำหนดเป็น left (จุด
หมุนจะอยู่ทางซ้าย) และสำหรับแกน Y - center
(จุดหมุนจะอยู่กึ่งกลางในแนวตั้ง):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
ตัวอย่าง
คุณสมบัตินี้สามารถกำหนดได้ไม่เฉพาะสำหรับการหมุน
แต่ยังสำหรับการแปลงอื่นๆ ด้วย ลองขยาย
ขนาดด้วย scale โดยกำหนดจุด
การแปลงเป็นมุมซ้ายล่าง:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left bottom;
transform: scale(1.5);
}
:
ตัวอย่าง
และตอนนี้กำหนดจุดการแปลงเป็น มุมขวาบน:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: right top;
transform: scale(1.5);
}
:
ตัวอย่าง
จุดการแปลงสามารถกำหนดได้แม้อยู่ภายนอก องค์ประกอบ ในตัวอย่างต่อไปนี้ เมื่อวางเมาส์ เหนือบล็อกสีแดง บล็อกสีดำจะทำการ หมุนโดยอ้างอิงจากจุดที่อยู่ ข้างนอก:
<div id="hover"></div>
<div id="elem"></div>
#hover {
border: 1px solid red;
width: 50px;
height: 50px;
}
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
transition: transform 1s;
transform-origin: -100px -100px;
}
#hover:hover + #elem {
transform: rotate(30deg);
}
:
