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

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

พร็อพเพอร์ตี้การเปลี่ยนรูปแบบ CSS แต่ละรายการ (translate, rotate และ scale) ช่วยให้คุณใช้การเปลี่ยนรูปแบบแยกต่างหากจากพร็อพเพอร์ตี้ transform ได้ วิธีนี้ช่วยให้ลบล้างการเปลี่ยนรูปแบบรายการเดียวได้ง่ายขึ้น เช่น ใน :hover

รายละเอียดการติดตั้งใช้งานที่สำคัญ

ระบบจะใช้พร็อพเพอร์ตี้การเปลี่ยนรูปแบบแต่ละรายการตามลำดับที่กำหนดไว้เสมอ ไม่ว่าจะอยู่ในลำดับใดใน CSS ดังนี้

1. translate
2. rotate
3. scale
4. transform (ใช้ล่าสุด)

หากต้องการลำดับที่แตกต่างออกไป (เช่น ปรับขนาดก่อนหมุน) คุณต้องใช้ฟังก์ชันพร็อพเพอร์ตี้ transform ต่อไป

ฟังก์ชันการเปลี่ยนรูปแบบจะไม่ลบล้างพร็อพเพอร์ตี้การเปลี่ยนรูปแบบแต่ละรายการ กล่าวคือ scale: 2; transform: scale(3); จะปรับขนาดเพิ่มขึ้น 2 เท่าก่อน แล้วจึงเพิ่มขึ้นอีก 3 เท่า รวมเป็น 6 เท่า

การป้องกันการเปลี่ยนแปลงที่ไม่คาดคิดในบริบทการซ้อนและบล็อกที่มีอยู่

พร็อพเพอร์ตี้ transform และพร็อพเพอร์ตี้การเปลี่ยนรูปแบบแต่ละรายการจะส่งผลต่อเลย์เอาต์และการแสดงผลของหน้าเว็บ และอาจทำให้เกิดลักษณะการทำงานที่ไม่คาดคิดกับดัชนีลำดับ Z หรือการกำหนดตำแหน่ง Anchor บังคับ: หากองค์ประกอบอาจมีการใช้การเปลี่ยนรูปแบบเป็นส่วนหนึ่งของการเปลี่ยนแปลงสถานะ เช่น :hover หรือการเปลี่ยนภาพหรือภาพเคลื่อนไหว ให้ใช้การเปลี่ยนรูปแบบเอกลักษณ์กับองค์ประกอบพื้นฐาน วิธีนี้ช่วยให้มั่นใจว่าบริบทการซ้อนและการจำกัดขอบเขตขององค์ประกอบจะไม่เปลี่ยนแปลงเมื่อใช้การเปลี่ยนรูปแบบ

.element{
  /* MANDATORY: Apply identity transformations for properties that will
     change on state changes (like :hover). This prevents unexpected layout
     or z-index shifts caused by creating a new stacking context only on hover. */
  translate: 0px;
  rotate: 0deg;
  scale: 1;
}
.element:hover{
  translate: 10px 10px;
  rotate: 20deg;
  scale: 0.8;
}

ภาพเคลื่อนไหวและการเปลี่ยนภาพแบบอิสระ

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

.card {
  /* Define independent animations that don't overwrite each other */
  animation: float 3s infinite ease-in-out;
  
  /* Transition only the scale property for hover states */
  transition: scale 0.3s ease;

  /* Establish the base scale to prevent a sudden stacking context shift when transitioning on hover. */
  scale: 1;
}

.card:hover {
  /* Only the scale changes; the 'float' animation (translate) continues uninterrupted */
  scale: 1.05;
}

@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

กลยุทธ์สำรอง

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

.element {
  /* Base transform */
  transform: translate(100px, 0) rotate(45deg);
  /* Specify the identity for the scale property. */
  scale: 1;
}

@supports not (translate: 0px) {
  .element:hover {
    /* Fallback: Must repeat translate and rotate even if only scale changes */
    transform: translate(100px, 0) rotate(45deg) scale(1.1);
  }
}

@supports (translate: 0px) {
  .element:hover {
    /* Modern: Only declare the change */
    scale: 1.1;
  }
}