Transform Functions

Setiap fungsi pada properti transform — dari translate hingga skewX — pada akhirnya diubah browser menjadi satu matriks 4×4 sebelum diterapkan pada piksel. Mengenal seluruh keluarga fungsi 2D membuat kita memilih alat yang tepat untuk tiap kebutuhan, sementara memahami hasil serialisasi matrix() membuat debugging di panel Computed tidak lagi menjadi tebakan. Chapter ini merangkum fungsi-fungsi 2D yang tersedia, membedah komponen matriksnya, dan menunjukkan bahwa mengubah urutan fungsi benar-benar mengubah hasil akhir.

Tabel Fungsi 2D #

Semua fungsi berikut menerima sudut dalam deg, rad, atau turn untuk parameter sudutnya:

Fungsi	Efek	Nilai computed (contoh)
`translate(x, y)`	Menggeser	`translate(30px, 10px)` → `matrix(1, 0, 0, 1, 30, 10)`
`skewX(sudut)`	Memiringkan sumbu horizontal	`skewX(20deg)` → `matrix(1, 0, 0.36397, 1, 0, 0)`
`skewY(sudut)`	Memiringkan sumbu vertikal	`skewY(10deg)` → `matrix(1, 0.176327, 0, 1, 0, 0)`
`skew(x, y)`	Keduanya sekaligus	jarang dipakai; tulis `skewX()` dan `skewY()`
`matrix(a, b, c, d, e, f)`	Semua di atas dalam satu tulisan	bentuk paling dasar

translateX(), translateY(), scaleX(), scaleY(), dan rotate() yang telah kita kenal adalah anggota keluarga yang sama. Angka 0.36397 pada skewX(20deg) adalah tan(20°) — fungsi kemiringan menyimpan tangen sudutnya pada komponen c matriks, sedangkan skewY(10deg) menyimpan tan(10°) = 0.176327 pada komponen b.

Membaca Komponen matrix() #

Browser menuliskan hasil apa pun sebagai matrix(a, b, c, d, e, f) — enam angka yang punya makna tetap:

Komponen	Makna
`a`	Skala horizontal (`scaleX`)
`b`	Kemiringan vertikal (`skewY`)
`c`	Kemiringan horizontal (`skewX`)
`d`	Skala vertikal (`scaleY`)
`e`, `f`	Geseran horizontal dan vertikal

Dengan tabel ini, matrix(2, 0, 0.72794, 1, 0, 0) langsung terbaca: skala horizontal 2 kali, kemiringan horizontal 0.72794 (= 2 × tan 20°), tanpa geseran. Membaca matriks juga cara cepat memeriksa kombinasi: dua angka terakhir selalu menjawab “elemen berpindah ke mana”.

Urutan Fungsi Mengubah Hasil #

Fungsi-fungsi pada satu deklarasi dikalikan menjadi satu matriks, dan perkalian matriks tidak komutatif. Demo chapter ini membandingkan dua deklarasi yang isinya sama tetapi urutannya terbalik:

css
.urutan-a { transform: scaleX(2) skewX(20deg); }
.urutan-b { transform: skewX(20deg) scaleX(2); }
.urutan-c { transform: translate(30px, 10px) skewX(20deg); }

Hasil di Browser:

text
Enam kotak tampil dengan transform statis. Nilai computed:
translate(30px, 10px) → "matrix(1, 0, 0, 1, 30, 10)";
skewX(20deg) → "matrix(1, 0, 0.36397, 1, 0, 0)";
skewY(10deg) → "matrix(1, 0.176327, 0, 1, 0, 0)";
scaleX(2) skewX(20deg) → "matrix(2, 0, 0.72794, 1, 0, 0)";
skewX(20deg) scaleX(2) → "matrix(2, 0, 0.36397, 1, 0, 0)";
translate(30px, 10px) skewX(20deg) → "matrix(1, 0, 0.36397, 1, 30, 10)".

Mari kita telaah pasangan yang urutannya dibalik:

scaleX(2) skewX(20deg) menghasilkan komponen kemiringan 0.72794 — dua kali lipat tan(20°). Kemiringan diterapkan lebih dulu pada koordinat lokal, kemudian hasilnya direntang dua kali secara horizontal, sehingga nilai kemiringannya ikut digandakan.
skewX(20deg) scaleX(2) menghasilkan komponen kemiringan 0.36397 — sudutnya tetap murni tan(20°), karena penskalaan terjadi sebelum kemiringan masuk.
translate(30px, 10px) skewX(20deg) menyimpan geseran bersih 30, 10: posisi translate yang ditulis paling kiri tidak terpengaruh kemiringan di belakangnya.

Demo chapter ini (fungsi-2d.html) membawa enam kotak dengan pemeriksaan data-expected pada properti transform — tabel komponen di atas dapat langsung dibandingkan dengan matriks computed yang tampil di demo.