Transform Origin

Rotasi dan pembesaran selalu membutuhkan titik acuan, dan selama ini titik itu tidak pernah kita atur sendiri. Property transform-origin mengatur titik poros tersebut: titik yang dipatok pada tempatnya sementara elemen memutar atau membesar di sekelilingnya. Nilai bawaannya ada di tengah elemen, dan banyak efek ikut berubah total begitu porosnya dipindah — dari arah ayunan rotasi sederhana sampai panel yang membuka seperti pintu berengsel.

Titik Poros Bawaan: Tengah Elemen #

Tanpa deklarasi apa pun, transform-origin bernilai 50% 50% — tepat di tengah, baik horizontal maupun vertikal. Rotasi berikut memutar elemen di tempat:

.roda-settings {
  transform: rotate(45deg);
}

Posisi kotak layout-nya tetap di tempat — seperti dibahas pada chapter sebelumnya, transform tidak mengubah layout.

Menulis Nilai transform-origin #

transform-origin menerima satu atau dua nilai: nilai pertama untuk sumbu horizontal, nilai kedua untuk vertikal. Bila nilai kedua tidak ditulis, browser memakai center untuk sumbu vertikal. Tiga bentuk nilai diterima:

.panel-engsel {
  transform-origin: left center;
}

.daun-menu {
  transform-origin: top left;
}

Kata kunci dan persen nyaris identik: 0% sama dengan left, 50% sama dengan center, dan 100% sama dengan right. Bedanya, persen boleh keluar dari rentang itu — transform-origin: 120% 50% menempatkan poros di luar elemen, trik yang kadang dipakai untuk efek ayunan yang lebih lebar.

Rotasi yang Sama, Hasil Berbeda #

Satu rotasi yang persis sama menghasilkan tiga keadaan akhir berbeda bila porosnya berbeda. Ketiga aturan berikut memutar kotak 45 derajat:

.poros-tengah {
  transform-origin: center;
  transform: rotate(45deg);
}

.poros-kiri-atas {
  transform-origin: top left;
  transform: rotate(45deg);
}

.poros-kanan-bawah {
  transform-origin: bottom right;
  transform: rotate(45deg);
}

Ketiga kotak di demo berikut memakai rotasi dan durasi yang identik — satu-satunya perbedaan adalah transform-origin; arahkan kursor ke masing-masing slot dan bandingkan arah ayunannya:

Sudut putaran ketiganya sama persis 45 derajat — yang berbeda hanya titik yang dipatok; poros yang menempel di tepi inilah bahan untuk efek engsel pada bagian selanjutnya.

Scale Juga Ikut Poros #

transform-origin berlaku untuk seluruh fungsi transform, bukan hanya rotate. scale(1.2) dengan poros tengah membesar merata ke segala arah; poros yang sama dipindah ke sudut kiri atas membuat elemen tumbuh hanya ke kanan dan ke bawah. Bila sebuah kartu membesar dari arah yang tak terduga, periksa transform-origin-nya terlebih dahulu sebelum mengubah nilai scale-nya.

Satu fakta yang sering ditanyakan: apakah poros ini juga memengaruhi translate? Tidak. Perpindahan translate selalu sejauh nilai yang ditulis, tidak peduli di mana porosnya berada. Poros hanya berperan pada fungsi yang bergerak di sekeliling titik acuan — rotate, scale, dan skew.

Efek Engsel: Panel yang Membuka #

Poros yang diletakkan di tepi menghasilkan gerakan seperti pintu berengsel — panel berputar pada satu sisinya sementara sisi lainnya membuka:

.flap-panel {
  transform-origin: left center;
  transition: transform 0.4s ease-in-out;
}

.flap-panel-terbuka {
  transform: rotate(-100deg);
}

Panel berporos di sisi kirinya; ketika class flap-panel-terbuka ditambahkan — misalnya lewat JavaScript atau perubahan state lain — panel mengayun ke atas seperti pintu yang dilihat dari arah atas. Versi tiga dimensinya memakai rotateY() dan butuh property perspective tambahan agar terlihat mendalam; itu materi lanjutan yang bisa kamu telusuri sendiri setelah course ini.

Kesalahan Umum #

Ringkasan #

transform-origin menentukan titik poros seluruh fungsi transform: nilai bawaannya 50% 50%, dan ia menerima kata kunci, persen, atau panjang. Memindah poros mengubah keadaan akhir rotasi dan arah pertumbuhan scale, sedangkan poros di tepi membuka efek engsel. Sampai di sini, semua gerakan kita masih punya titik awal dan akhir yang tertulis di CSS; chapter berikutnya memperkenalkan @keyframes, tempat kita mendefinisikan titik-titik perhentian sendiri dan membiarkan animasi berjalan tanpa pemicu.