Thuộc tính biến đổi riêng lẻ

Thuộc tính transform cho phép bạn áp dụng nhiều phép biến đổi theo thứ tự đã chỉ định, nhưng mọi thay đổi đối với một phép biến đổi đều yêu cầu bạn phải chỉ định lại toàn bộ chuỗi phép biến đổi. Điều này khiến việc tạo ảnh động hoặc chuyển đổi một phép biến đổi trở nên khó khăn.

Các thuộc tính biến đổi CSS riêng lẻ (translate, rotate và scale) cho phép bạn áp dụng các phép biến đổi độc lập với thuộc tính transform. Phương pháp này giúp bạn dễ dàng ghi đè một phép biến đổi, chẳng hạn như trên :hover.

Thông tin chi tiết quan trọng về việc triển khai

Các thuộc tính biến đổi riêng lẻ luôn được áp dụng theo thứ tự cố định, bất kể thứ tự của chúng trong CSS:

1. translate
2. rotate
3. scale
4. transform (áp dụng gần đây nhất)

Nếu cần một thứ tự khác (ví dụ: điều chỉnh tỷ lệ trước khi xoay), bạn phải tiếp tục sử dụng các hàm thuộc tính transform.

Hàm biến đổi không ghi đè các thuộc tính biến đổi riêng lẻ. Nói cách khác, scale: 2; transform: scale(3); trước tiên sẽ điều chỉnh tỷ lệ gấp 2 lần, sau đó gấp 3 lần, tổng cộng là 6 lần.

Ngăn chặn những thay đổi ngoài dự kiến trong bối cảnh xếp chồng và khối chứa

Thuộc tính transform và các thuộc tính biến đổi riêng lẻ ảnh hưởng đến bố cục và việc hiển thị trang, đồng thời có thể gây ra hành vi không mong muốn với chỉ mục z hoặc vị trí neo. BẮT BUỘC: Nếu một phần tử có thể áp dụng phép biến đổi trong quá trình thay đổi trạng thái như :hover, hoặc chuyển đổi hay tạo ảnh động, hãy áp dụng phép biến đổi đồng nhất cho phần tử cơ sở. Điều này đảm bảo rằng bối cảnh xếp chồng và vùng chứa của phần tử không thay đổi khi áp dụng phép biến đổi.

.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;
}

Ảnh động và hiệu ứng chuyển tiếp độc lập

Lợi ích chính là khả năng xác định ảnh động hoặc hiệu ứng chuyển đổi chồng chéo nhắm đến các thuộc tính khác nhau mà không có xung đột.

.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; }
}

Chiến lược dự phòng

Đối với các trình duyệt không hỗ trợ các thuộc tính biến đổi riêng lẻ, hãy sử dụng thuộc tính transform truyền thống. Lưu ý rằng việc này yêu cầu khai báo lại toàn bộ ngăn xếp biến đổi nếu bạn muốn sửa đổi một phần ở trạng thái khác.

.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;
  }
}