Transform

Menggeser kartu 10 piksel ke bawah dengan margin-top atau position memicu browser menghitung ulang tata letak seluruh sekitarnya. Properti transform menawarkan jalan lain: elemen digeser, diputar, diperbesar, atau dimiringkan setelah tata letak selesai, tanpa memengaruhi posisi elemen lain. Karena itulah transform menjadi pasangan utama transition dan animation — perjalanannya berlangsung pada tahap komposit yang paling murah. Pada Chapter ini kita mengenal fungsi-fungsi utamanya, membaca hasil computed berbentuk matrix, dan membuktikan bahwa urutan fungsi menentukan hasil akhir.

Lima Fungsi Utama #

Tabel berikut merangkum fungsi transform yang paling sering kita pakai:

Satu catatan tentang satuan pada translate: nilai persen mengacu pada ukuran elemen itu sendiri, bukan ukuran induknya — translateX(50%) menggeser elemen sejauh setengah lebarnya. Perilaku ini berguna untuk memusatkan elemen secara presisi maupun membuat gerakan yang ikut menskala bersama komponennya.

Demo chapter ini menampilkan enam kotak yang menerapkan fungsi-fungsi tersebut secara statis:

.kotak-translate { transform: translateY(10px); }
.kotak-rotate    { transform: rotate(45deg); }
.kotak-scale     { transform: scale(1.2); }
.kotak-skew      { transform: skewX(20deg); }
.kotak-urutan-a  { transform: translate(40px, 0) rotate(90deg); }
.kotak-urutan-b  { transform: rotate(90deg) translate(40px, 0); }

Hasil di Browser:

Enam kotak tampil dengan transform statis. Nilai computed transform:
translateY(10px) → "matrix(1, 0, 0, 1, 0, 10)";
rotate(45deg) → "matrix(0.707107, 0.707107, -0.707107, 0.707107, 0, 0)";
scale(1.2) → "matrix(1.2, 0, 0, 1.2, 0, 0)";
skewX(20deg) → "matrix(1, 0, 0.36397, 1, 0, 0)";
translate(40px, 0) rotate(90deg) → "matrix(0, 1, -1, 0, 40, 0)";
rotate(90deg) translate(40px, 0) → "matrix(0, 1, -1, 0, 0, 40)".

Mari kita telaah dua baris pertama:

1. Baris 1 (translateY(10px)): elemen digeser 10 piksel ke bawah. Browser menyimpan hasilnya sebagai matriks 2D matrix(1, 0, 0, 1, 0, 10) — empat angka pertama adalah skala dan rotasi (maka semuanya netral), dua angka terakhir adalah geseran x dan y.
2. Baris 2 (rotate(45deg)): elemen diputar 45 derajat. Nilai 0.707107 adalah hasil cos(45°) dan sin(45°) — browser selalu merapikan fungsi apa pun menjadi satu matriks, sehingga nilai computed tidak lagi menampilkan tulisan rotate().

Transform Bekerja pada Tahap Komposit #

Ketika kita mengubah margin atau width, browser mengulang alur penuh: menghitung gaya, menghitung ulang layout, menggambar ulang piksel, lalu menyusun lapisan. Ketika kita mengubah transform, dua tahap pertama dilewati — elemen sudah digambar, dan browser cukup memindahkan hasilnya pada tahap komposit. Inilah sebabnya daftar properti yang aman dianimasikan selalu diawali transform dan opacity, sebuah aturan yang kita perdalam pada Chapter Animation Performance .

Dua detail lain yang perlu dipegang:

• Titik poros: rotasi dan penskalaan berpusat pada tengah elemen secara bawaan. Titik ini dapat digeser dengan transform-origin, misalnya transform-origin: top left untuk memutar dari pojok kiri atas.
• Konteks susunan: elemen yang ditransformasi membentuk stacking context sendiri, sehingga z-index-nya dihitung terpisah dari tetangganya.

Urutan Fungsi Menentukan Hasil #

Fungsi-fungsi pada satu deklarasi transform dikalikan menjadi satu matriks — dan perkalian matriks tidak komutatif. Dua kotak terakhir pada demo menulis fungsi yang sama dengan urutan terbalik, dan hasilnya berbeda:

• translate(40px, 0) rotate(90deg) menghasilkan matriks dengan geseran 40, 0: kotak berakhir 40 piksel ke kanan dari posisi asal, karena geseran dihitung pada sumbu halaman sebelum rotasi bekerja.
• rotate(90deg) translate(40px, 0) menghasilkan matriks dengan geseran 0, 40: geseran 40 piksel terjadi pada sumbu yang sudah diputar 90 derajat, sehingga kotak berakhir 40 piksel ke bawah.

Bila hasil kombinasi terasa sulit ditebak, buka panel Computed di DevTools dan baca matriksnya: dua angka terakhir selalu menunjukkan posisi akhir elemen relatif terhadap posisi asalnya.