Transform Origin

Memutar kartu 45 derajat dengan rotate(45deg) membuat kartu berputar di sekitar titik tengahnya — dan titik tengah itu bukan satu-satunya pilihan. Properti transform-origin menentukan titik poros bagi seluruh fungsi transform: putaran berputar di sekitarnya, penskalaan menggembung darinya, dan kemiringan terikat padanya. Satu nilai transform-origin dapat menjadi pembeda antara pintu yang terbuka dengan wajar dan pintu yang berputar seperti piringan. Pada Chapter ini kita mengenal nilai bawaannya, menggesernya, dan membuktikan efeknya lewat nilai computed.

Titik Poros Bawaan #

Nilai bawaan transform-origin adalah 50% 50% — tepat di tengah elemen. Persen di sini mengacu pada ukuran elemen sendiri, sehingga pada kotak berukuran 120px × 80px titik porosnya berada 60px dari tepi kiri dan 40px dari tepi atas. Browser menuliskan nilai computed dalam piksel: probe demo chapter ini mencatat transform-origin kotak 120px × 80px sebagai 60px 40px.

Selain persen, transform-origin menerima kata kunci dan panjang:

Dua kata kunci boleh ditulis satu (sisanya center), dan urutan pembandingnya adalah x y — horizontal terlebih dahulu.

Menggeser Titik Poros #

Contoh berikut memutar tiga kartu identik 45 derajat, masing-masing dengan titik poros berbeda:

.kartu-pusat     { transform: rotate(45deg); }
.kartu-pojok     { transform: rotate(45deg); transform-origin: 0 0; }
.kartu-kanan-atas { transform: rotate(45deg); transform-origin: 100% 0; }

Hasil di Browser:

Tiga kartu 120px × 80px diputar 45deg dengan titik poros berbeda.
Nilai computed transform-origin: kartu-pusat "60px 40px";
kartu-pojok "0px 0px"; kartu-kanan-atas "120px 0px".
Menariknya, transform ketiganya tetap tercatat
"matrix(0.707107, 0.707107, -0.707107, 0.707107, 0, 0)" —
matriks transform tidak berubah, yang berubah hanyalah di mana
matriks itu diterapkan.

Temuan terakhir di atas adalah poin penting: transform-origin tidak mengubah nilai matriks transform. Origin adalah data terpisah yang diterapkan browser saat menggambar — matriks diterapkan relatif terhadap titik poros tersebut. Karena itu panel Computed di DevTools menampilkan transform yang sama persis untuk kartu yang diputar dengan origin berbeda; efek visualnya sendiri baru terlihat di layar. Inilah alasan probe otomatis memeriksa transform-origin secara terpisah dari transform.

Kasus Penggunaan yang Lazim #

Tiga pola berikut paling sering kita temui:

1. Pintu dan engsel: elemen panel dengan transform-origin: left center dan rotateY(-100deg) berayun seperti pintu — porosnya di tepi kiri, bukan di tengah. Pola ini membutuhkan ruang 3D yang dibahas pada Chapter Perspective .
2. Jam dan indikator: jarum jam memakai transform-origin: bottom center agar rotate() memutarnya dari pangkal, bukan dari tengah jarum.
3. Menu yang tumbuh dari pojok: dropdown dengan scale(0) menuju scale(1) terasa bermakna bila titik asalnya adalah tombol yang memunculkannya — cukup transform-origin: top right pada menu yang muncul di kanan atas tombol.

Untuk animasi masuk menu tersebut, pertimbangkan juga prefers-reduced-motion agar pengguna yang mengurangi gerakan tetap nyaman — polanya kita bahas pada Chapter Motion Accessibility .

Demo chapter ini (origin.html) memuat tiga kartu berputar dengan bayangan posisi asal (garis putus-putus), serta empat pemeriksaan data-expected pada transform-origin dan dua pemeriksaan pada transform yang membuktikan matriksnya tetap sama.