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

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

Bramus
L. David Baron

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

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

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

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

แม้ว่าพร็อพเพอร์ตี้ 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 ซึ่งสนับสนุนคุณสมบัติเหล่านี้อยู่แล้ว

การสนับสนุนเบราว์เซอร์

  • 104
  • 104
  • 72
  • 14.1

แหล่งที่มา

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

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

การสั่งซื้อมีความสำคัญ

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

เมื่อใช้ 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;
}

การใช้คุณสมบัติการเปลี่ยนรูปแบบแต่ละรายการ

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

@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 นั้นแตกต่างจาก rotate สำหรับ transform

ส่วนหนึ่งของชุดหนังสือที่ทำงานร่วมกันแบบใหม่