Kontrol yang lebih mendetail atas transformasi CSS dengan properti transformasi individual

Mengubah elemen dengan properti translate, rotate, dan scale

Bramus

L. David Baron

Properti transform CSS

Untuk menerapkan transformasi ke elemen, gunakan Properti transform CSS. Properti menerima satu atau beberapa <transform-function> yang diterapkan satu per satu.

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

Elemen yang ditargetkan ditranslasikan sebesar 50% pada sumbu X, diputar sebesar 30 derajat, dan akhirnya diskalakan hingga 120%.

Meskipun properti transform berfungsi dengan baik, akan sedikit merepotkan jika Anda ingin mengubah nilai tersebut satu per satu.

Untuk mengubah skala saat mengarahkan kursor, Anda harus menduplikasi semua fungsi di properti transformasi, meskipun nilainya tetap tidak berubah.

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

Setiap properti transformasi

Pengiriman dengan Chrome 104 adalah properti individual untuk transformasi CSS. Propertinya adalah scale, rotate, dan translate, yang dapat Anda gunakan untuk menentukan bagian transformasi tersebut satu per satu.

Dengan melakukannya, Chrome akan menggabungkan Firefox dan Safari yang sudah mendukung properti ini.

Dengan menulis ulang contoh transform sebelumnya dengan masing-masing properti, cuplikan Anda akan menjadi:

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

Pentingnya urutan

Salah satu perbedaan utama antara properti transform CSS asli dan properti baru adalah urutan penerapan transformasi yang dideklarasikan.

Dengan transform, fungsi transformasi diterapkan sesuai urutan penulisannya, dari kiri (di luar) ke kanan (di dalam).

Dengan setiap properti transformasi, urutannya bukan urutan saat properti tersebut dideklarasikan. Urutannya selalu sama: translate pertama (di luar), lalu rotate, lalu scale (di dalam).

Artinya, kedua cuplikan kode berikut memberikan hasil yang sama:

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

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

Dalam kedua kasus, elemen yang ditargetkan akan pertama-tama diterjemahkan oleh 50% pada sumbu X, lalu diputar oleh 30deg, dan akhirnya diskalakan oleh 1.2.

Jika salah satu properti transformasi individual dideklarasikan bersama dengan properti transform, transformasi individual akan diterapkan terlebih dahulu (translate, rotate, lalu scale) dengan transform terakhir (di dalam). Detail selengkapnya ada dalam spesifikasi yang menentukan cara penghitungan matriks transformasi.

Animasi

Alasan utama properti ini ditambahkan adalah untuk mempermudah animasi. Misalnya, Anda ingin menganimasikan elemen sebagai berikut:

Menggunakan transform

Untuk menerapkan animasi ini menggunakan transform, Anda harus menghitung semua nilai di antara untuk semua transformasi yang ditentukan, dan menyertakannya di setiap keyframe. Misalnya, untuk melakukan rotasi pada tanda 10%, nilai untuk transformasi lainnya juga harus dihitung, karena properti transform memerlukan semuanya.

Kode CSS yang dihasilkan menjadi seperti ini:

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

Menggunakan properti transformasi individual

Dengan properti transformasi individual, penulisan menjadi jauh lebih mudah. Daripada menarik semua transformasi dari keyframe ke keyframe, Anda dapat menargetkan setiap transformasi satu per satu. Anda juga tidak perlu lagi menghitung semua nilai di antaranya.

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

Menggunakan properti transformasi individual dan beberapa keyframe

Untuk membuat kode menjadi modular, Anda dapat membagi setiap sub-animasi menjadi kumpulan keyframe-nya sendiri.

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

Berkat pemisahan ini, Anda dapat menerapkan setiap kumpulan keyframe terpisah sesuai keinginan karena properti transform–yang kini telah menjadi properti individual–tidak lagi saling menimpa. Di atas, Anda dapat memberikan waktu yang berbeda untuk setiap transformasi tanpa perlu menulis ulang semuanya.

Performa

Animasi yang menggunakan properti baru ini sama efisiennya dengan animasi properti transform yang ada.

Animasi translate, rotate, dan scale berjalan di kompositor dengan cara yang sama seperti animasi transform, sehingga animasi tersebut bagus untuk performa animasi dengan cara yang sama seperti transform.

Properti baru ini juga berfungsi dengan properti will-change. Secara umum, sebaiknya hindari penggunaan will-change secara berlebihan dengan menggunakannya pada jumlah minimum elemen yang diperlukan, dan gunakan waktu sesingkat mungkin. Namun, sebaiknya Anda juga menjelaskan sespesifik mungkin. Misalnya, jika Anda menggunakan will-change untuk mengoptimalkan animasi dengan properti rotate dan filter, Anda harus mendeklarasikannya menggunakan will-change: rotate, filter. Hal ini sedikit lebih baik daripada menggunakan will-change: transform, filter jika Anda menganimasikan rotate dan filter, karena beberapa struktur data yang dibuat Chrome sebelumnya saat Anda menggunakan will-change berbeda untuk transform dibandingkan rotate.

Bagian dari serial yang dapat dioperasikan bersama