คุณสมบัติ transform-origin

คุณสมบัติ transform-origin กำหนดจุด ที่การแปลงขององค์ประกอบซึ่งกำหนดโดยคุณสมบัติ transform จะเกิดขึ้น โดยอ้างอิงจากจุดนี้ โดยค่าเริ่มต้น จุดนี้คือ ศูนย์กลางขององค์ประกอบ และตัวอย่างเช่น การหมุนจะเกิดขึ้นโดยอ้างอิงจาก ศูนย์กลางของมัน อย่างไรก็ตาม เราสามารถเปลี่ยนพฤติกรรมนี้ได้ และทำให้องค์ประกอบหมุนโดยอ้างอิงจาก ด้านข้างของตัวเอง มุมของตัวเอง หรือแม้กระทั่งอ้างอิงจาก จุดที่อยู่นอกองค์ประกอบ

ไวยากรณ์

cssตัวเลือก {
  transform-origin: แกน-X แกน-Y แกน-Z;
}

ค่าบนแกน Y และ Z ไม่ใช่ค่าบังคับ สามารถละเว้นได้ (พวกมันจะรับค่า ตามค่าเริ่มต้น) การเลื่อนจุดบนแกน Z จำเป็นสำหรับ การแปลงแบบ 3D

ค่าสำหรับแกน X

ค่าเริ่มต้น: center

ค่าสำหรับแกน Y

ค่าเริ่มต้น: center

ค่าบนแกน Z

ค่าเริ่มต้น: 0px

ตัวอย่าง

ตอนนี้ค่าของคุณสมบัติ transform-origin ยังไม่ได้กำหนดไว้ และบล็อกจะหมุนโดยอ้างอิงจาก ศูนย์กลางของตัวเอง วางเมาส์เหนือบล็อกเพื่อ เห็นเอฟเฟกต์:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: center center;
  transform: rotate(30deg);
}

Результат:

ตัวอย่าง

และตอนนี้เมื่อวางเมาส์ บล็อกจะหมุนโดยอ้างอิงจาก มุมซ้ายบน:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: 0px 0px;
  transform: rotate(30deg);
}

Результат:

ตัวอย่าง

และตอนนี้เมื่อวางเมาส์ บล็อกจะหมุนโดยอ้างอิงจาก มุมขวาล่าง เพื่อทำเช่นนี้ ควรกำหนด จุดการแปลงให้ห่าง 100% ไปทางขวา และ 100% ลงไป (สามารถกำหนดเป็น px ได้เช่นกัน แต่หากขนาดองค์ประกอบเปลี่ยน จุดการแปลงจะยังคงอยู่ที่เดิม ดังนั้นควรทำเป็น % จะดีกว่า):

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: 100% 100%;
  transform: rotate(30deg);
}

Результат:

ตัวอย่าง

หมุนบล็อกโดยอ้างอิงจากมุมขวาบน:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: 100% 0%;
  transform: rotate(30deg);
}

Результат:

ตัวอย่าง

หมุนบล็อกโดยอ้างอิงจากศูนย์กลางด้านซ้าย สำหรับสิ่งนี้ สำหรับแกน X กำหนดเป็น left (จุด หมุนจะอยู่ทางซ้าย) และสำหรับแกน Y - center (จุดหมุนจะอยู่กึ่งกลางในแนวตั้ง):

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: left center;
  transform: rotate(30deg);
}

Результат:

ตัวอย่าง

คุณสมบัตินี้สามารถกำหนดได้ไม่เฉพาะสำหรับการหมุน แต่ยังสำหรับการแปลงอื่นๆ ด้วย ลองขยาย ขนาดด้วย scale โดยกำหนดจุด การแปลงเป็นมุมซ้ายล่าง:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: left bottom;
  transform: scale(1.5);
}

Результат:

ตัวอย่าง

และตอนนี้กำหนดจุดการแปลงเป็น มุมขวาบน:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: right top;
  transform: scale(1.5);
}

Результат:

ตัวอย่าง

จุดการแปลงสามารถกำหนดได้แม้อยู่ภายนอก องค์ประกอบ ในตัวอย่างต่อไปนี้ เมื่อวางเมาส์ เหนือบล็อกสีแดง บล็อกสีดำจะทำการ หมุนโดยอ้างอิงจากจุดที่อยู่ ข้างนอก:

html<div id="hover"></div>
<div id="elem"></div>

css#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);
}

Результат: