การควบคุมการแปลง CSS ที่ละเอียดขึ้นด้วยคุณสมบัติการเปลี่ยนรูปแบบของแต่ละรายการ

เปลี่ยนรูปแบบองค์ประกอบด้วยพร็อพเพอร์ตี้ translate, rotate และ scale

Bramus

L. David Baron

พร็อพเพอร์ตี้ CSS transform

หากต้องการใช้การเปลี่ยนรูปแบบกับองค์ประกอบ ให้ใช้พร็อพเพอร์ตี้ transform ของ CSS พร็อพเพอร์ตี้ยอมรับ <transform-function> อย่างน้อย 1 รายการ ซึ่งจะใช้ตามลําดับ

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

องค์ประกอบเป้าหมายจะเลื่อน 50% บนแกน X หมุน 30 องศา และสุดท้ายจะขยายขนาดเป็น 120%

แม้ว่าพร็อพเพอร์ตี้ transform จะทํางานได้อย่างถูกต้อง แต่อาจทําให้ยุ่งยากเมื่อคุณต้องการแก้ไขค่าใดค่าหนึ่งแยกกัน

หากต้องการเปลี่ยนขนาดเมื่อวางเมาส์เหนือ คุณต้องคัดลอกฟังก์ชันทั้งหมดในพร็อพเพอร์ตี้ transform แม้ว่าค่าของฟังก์ชันจะยังคงเดิมก็ตาม

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

พร็อพเพอร์ตี้การเปลี่ยนรูปแบบแต่ละรายการ

รายการที่มาพร้อมกับ Chrome 104 เป็นพร็อพเพอร์ตี้เดี่ยวสําหรับการเปลี่ยนรูปแบบ CSS พร็อพเพอร์ตี้ดังกล่าวคือ scale, rotate และ translate ซึ่งคุณใช้เพื่อกำหนดส่วนต่างๆ ของการเปลี่ยนรูปแบบแยกกันได้

ซึ่งทำให้ Chrome เข้าร่วมกับ Firefox และ Safari ที่รองรับพร็อพเพอร์ตี้เหล่านี้อยู่แล้ว

การเขียนตัวอย่าง transform ก่อนหน้าใหม่โดยใช้พร็อพเพอร์ตี้แต่ละรายการ ข้อมูลโค้ดจะกลายเป็นดังนี้

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

ลำดับความสำคัญ

ความแตกต่างที่สําคัญอย่างหนึ่งระหว่างพร็อพเพอร์ตี้ transform ของ CSS เดิมกับพร็อพเพอร์ตี้ใหม่คือลําดับการใช้การเปลี่ยนรูปแบบที่ประกาศ

เมื่อใช้ transform ระบบจะใช้ฟังก์ชันการเปลี่ยนรูปแบบตามลำดับที่เขียนไว้ จากซ้าย (ด้านนอก) ไปขวา (ด้านใน)

เมื่อใช้พร็อพเพอร์ตี้การเปลี่ยนรูปแบบแต่ละรายการ ลําดับจะไม่ได้เป็นลําดับที่ประกาศ ลำดับจะเหมือนกันเสมอ โดยเริ่มจาก translate (ด้านนอก) ตามด้วย rotate และ scale (ด้านใน)

ซึ่งหมายความว่าข้อมูลโค้ดทั้ง 2 รายการต่อไปนี้จะให้ผลลัพธ์เหมือนกัน

.transform--individual {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.transform--individual-alt {
  rotate: 30deg;
  translate: 50% 0;
  scale: 1.2;
}

ในทุกกรณี องค์ประกอบเป้าหมายจะได้รับการแปลเป็น 50% ในแนวแกน X ก่อน จากนั้นจะหมุนเป็น 30deg และสุดท้ายจะปรับขนาดเป็น 1.2

หากมีการประกาศพร็อพเพอร์ตี้การเปลี่ยนรูปแบบรายการใดรายการหนึ่งพร้อมกับพร็อพเพอร์ตี้ transform ระบบจะใช้การเปลี่ยนรูปแบบแต่ละรายการก่อน (translate, rotate แล้วตามด้วย scale) โดยให้ transform อยู่ด้านในสุด โปรดดูรายละเอียดเพิ่มเติมในข้อกําหนดที่กําหนดวิธีคํานวณเมทริกซ์การเปลี่ยนรูปแบบ

ภาพเคลื่อนไหว

เหตุผลหลักที่เพิ่มพร็อพเพอร์ตี้เหล่านี้คือเพื่อให้สร้างภาพเคลื่อนไหวได้ง่ายขึ้น สมมติว่าคุณต้องการทำให้องค์ประกอบเคลื่อนไหวดังนี้

กำลังใช้ transform

หากต้องการใช้ภาพเคลื่อนไหวนี้โดยใช้ transform คุณจะต้องคํานวณค่าระหว่างกลางทั้งหมดสําหรับการเปลี่ยนรูปแบบที่กําหนดไว้ทั้งหมด และรวมค่าเหล่านั้นไว้ในคีย์เฟรมแต่ละรายการ เช่น หากต้องการหมุนที่จุด 10% จะต้องคํานวณค่าสําหรับการเปลี่ยนรูปแบบอื่นๆ ด้วย เนื่องจากพร็อพเพอร์ตี้ transform ต้องใช้ค่าทั้งหมด

โค้ด CSS ที่ได้จะมีลักษณะดังนี้

@keyframes anim {
  0% { transform: translateX(0%); }
  5% { transform: translateX(5%) rotate(90deg) scale(1.2); }
  10% { transform: translateX(10%) rotate(180deg) scale(1.2); }
  90% { transform: translateX(90%) rotate(180deg) scale(1.2); }
  95% { transform: translateX(95%) rotate(270deg) scale(1.2); }
  100% { transform: translateX(100%) rotate(360deg); }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

การใช้พร็อพเพอร์ตี้การแปลงแต่ละรายการ

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

@keyframes anim {
  0% { translate: 0% 0; }
  100% { translate: 100% 0; }

  0%, 100% { scale: 1; }
  5%, 95% { scale: 1.2; }

  0% { rotate: 0deg; }
  10%, 90% { rotate: 180deg; }
  100% { rotate: 360deg; }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

การใช้คุณสมบัติการแปลงแต่ละรายการและคีย์เฟรมหลายรายการ

หากต้องการให้โค้ดเป็นแบบโมดูล คุณก็แยกภาพเคลื่อนไหวย่อยแต่ละรายการออกเป็นชุดคีย์เฟรมของตัวเองได้

@keyframes move {
  0% { translate: 0% 0; }
  100% { translate: 100% 0; }
}

@keyframes scale {
  0%, 100% { scale: 1; }
  5%, 95% { scale: 1.2; }
}

@keyframes rotate {
  0% { rotate: 0deg; }
  10%, 90% { rotate: 180deg; }
  100% { rotate: 360deg; }
}

.target {
  animation: move 2s, scale 2s, rotate 2s;
  animation-fill-mode: forwards;
}

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

ประสิทธิภาพ

ภาพเคลื่อนไหวที่ใช้พร็อพเพอร์ตี้ใหม่เหล่านี้มีประสิทธิภาพเท่ากับภาพเคลื่อนไหวของพร็อพเพอร์ตี้ transform ที่มีอยู่

ภาพเคลื่อนไหวของ translate, rotate และ scale จะทำงานในคอมโพสิตอร์เช่นเดียวกับภาพเคลื่อนไหวของ transform จึงส่งผลดีต่อประสิทธิภาพภาพเคลื่อนไหวเช่นเดียวกับ transform

พร็อพเพอร์ตี้ใหม่เหล่านี้ยังใช้งานได้กับพร็อพเพอร์ตี้ will-change ด้วย โดยทั่วไปแล้ว คุณควรหลีกเลี่ยงการใช้ will-change มากเกินไปโดยการใช้กับองค์ประกอบจํานวนน้อยที่สุดที่จําเป็น และใช้เวลาสั้นที่สุดเท่าที่จะเป็นไปได้ แต่คุณก็ควรระบุให้เฉพาะเจาะจงที่สุด ตัวอย่างเช่น หากคุณใช้ will-change เพื่อเพิ่มประสิทธิภาพภาพเคลื่อนไหวด้วยพร็อพเพอร์ตี้ rotate และ filter คุณควรประกาศโดยใช้ will-change: rotate, filter วิธีนี้ดีกว่าการใช้ will-change: transform, filter เล็กน้อยในกรณีที่คุณสร้างภาพเคลื่อนไหว rotate และ filter เนื่องจากโครงสร้างข้อมูลบางอย่างที่ Chrome สร้างไว้ล่วงหน้าเมื่อคุณใช้ will-change จะแตกต่างกันสำหรับ transform กับ rotate

เป็นส่วนหนึ่งของชุดที่ทำงานร่วมกันได้ใหม่