Mentransformasi elemen dengan properti translate, rotate, dan scale
Properti transform CSS
Untuk menerapkan transformasi ke elemen, gunakan Properti transform CSS. Properti menerima satu atau beberapa <transform-function> yang diterapkan satu demi satu.
.target {
transform: translateX(50%) rotate(30deg) scale(1.2);
}
Elemen yang ditargetkan diterjemahkan sebesar 50% pada sumbu X, diputar 30 derajat, dan akhirnya ditingkatkan skalanya hingga 120%.
Meskipun properti transform berfungsi dengan baik, akan sedikit membosankan jika Anda ingin mengubah salah satu nilai tersebut satu per satu.
Untuk mengubah skala saat kursor diarahkan, Anda harus menduplikasi semua fungsi di properti transformasi, meskipun nilainya tidak berubah.
.target:hover {
transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}
Properti transformasi individual
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 demikian, Chrome akan bergabung dengan Firefox dan Safari yang sudah mendukung properti ini.
Menulis ulang contoh transform sebelumnya dengan properti individual, cuplikan Anda menjadi seperti ini:
.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, yaitu dari kiri (luar) ke kanan (di dalam).
Dengan properti transformasi individual, urutannya bukanlah urutan deklarasinya. Urutannya selalu sama: translate pertama (di luar), lalu rotate, kemudian scale (di dalam).
Ini berarti 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 tersebut, elemen yang ditargetkan akan diterjemahkan oleh 50% pada sumbu X terlebih dahulu, lalu diputar oleh 30deg, dan terakhir 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 tersedia di spesifikasi yang menentukan cara penghitungan matriks transformasi.
Animasi
Alasan utama penambahan properti ini adalah untuk membuat animasi lebih mudah. Misalnya, Anda ingin menganimasikan elemen seperti berikut:
Menggunakan transform
Untuk menerapkan animasi ini menggunakan transform, Anda harus menghitung semua nilai di antara semua transformasi yang ditentukan, dan menyertakan nilai tersebut di setiap keyframe. Misalnya, untuk melakukan rotasi pada tanda 10%, nilai untuk transformasi lain 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, hal ini menjadi jauh lebih mudah untuk ditulis. 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 antara keduanya.
@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 menjadikan kode bersifat modular, Anda dapat memisahkan setiap sub-animasi ke dalam kumpulan keyframenya 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 compositor dengan cara yang sama seperti animasi transform, sehingga 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 dalam waktu sesingkat mungkin. Tetapi sebaiknya Anda menjelaskannya sespesifik mungkin. Misalnya, jika Anda menggunakan will-change untuk mengoptimalkan animasi dengan properti rotate dan filter, Anda harus mendeklarasikannya menggunakan will-change: rotate, filter. 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 versus rotate.
Bagian dari Seri yang baru memiliki interoperabilitas