Properti Transformasi Individual

Properti transform memungkinkan Anda menerapkan beberapa transformasi dalam urutan yang ditentukan, tetapi setiap perubahan pada satu transformasi memerlukan penentuan ulang seluruh rantai transformasi. Hal ini menyulitkan untuk menganimasikan atau mentransisikan satu transformasi.

Properti transformasi CSS individual (translate, rotate, dan scale) memungkinkan Anda menerapkan transformasi secara independen dari properti transform. Pendekatan ini memudahkan penggantian satu transformasi, misalnya pada :hover.

Detail Penerapan Penting

Properti transformasi individual selalu diterapkan dalam urutan tetap, terlepas dari urutannya dalam CSS Anda:

1. translate
2. rotate
3. scale
4. transform (diterapkan terakhir)

Jika Anda memerlukan urutan yang berbeda (misalnya, penskalaan sebelum rotasi), Anda harus terus menggunakan fungsi properti transform.

Fungsi transformasi tidak mengganti properti transformasi individual. Dengan kata lain, scale: 2; transform: scale(3); akan diskalakan terlebih dahulu sebesar 2x, lalu 3x lagi, sehingga totalnya menjadi 6x.

Mencegah Perubahan yang Tidak Terduga dalam Konteks Penumpukan dan Blok Penampung

Properti transform dan properti transformasi individual memengaruhi tata letak dan rendering halaman serta dapat menyebabkan perilaku yang tidak terduga dengan z-index atau pemosisian anchor. WAJIB: Jika elemen mungkin memiliki transformasi yang diterapkan sebagai bagian dari perubahan status seperti :hover, atau transisi atau animasi, terapkan transformasi identitas ke elemen dasar. Hal ini memastikan bahwa konteks tumpukan dan penampungan elemen tidak berubah saat transformasi diterapkan.

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

Animasi dan Transisi Independen

Manfaat utamanya adalah kemampuan untuk menentukan animasi atau transisi yang tumpang-tindih yang menargetkan properti berbeda tanpa konflik.

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

Strategi penggantian

Untuk browser yang tidak mendukung properti transform individual, gunakan properti transform tradisional. Perhatikan bahwa hal ini memerlukan deklarasi ulang seluruh stack transformasi jika Anda ingin mengubah satu bagian dalam status yang berbeda.

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