Transform Use Cases

Setelah fungsi-fungsi transform dikenal satu per satu, kekuatan sebenarnya baru terasa ketika fungsi itu dipasangkan dengan pola antarmuka nyata. Chapter ini mengumpulkan lima pola yang paling sering kita temui — kartu yang terangkat saat disentuh kursor, badge yang miring, elemen yang terpusat sempurna, kartu flip dua sisi, dan lapisan parallax — lengkap dengan pertimbangan kapan transform adalah alat yang tepat, dan kapan sebaiknya kita memilih jalan lain.

Kartu Lift saat Hover #

Kartu yang naik beberapa piksel dengan bayangan yang menggelap adalah umpan balik “komponen ini hidup” yang paling populer di web. Polanya memadukan translateY dengan box-shadow, dan keduanya berada pada tahap komposit sehingga transisinya mulus — pertimbangan performa ini kita bedah pada Chapter Animation Performance :

1. transition-property: transform, box-shadow: hanya dua properti ini yang dianimasikan — keduanya tidak memicu perhitungan ulang layout.
2. :hover dan :focus-within: kartu juga terangkat ketika salah satu isinya menerima fokus keyboard, sehingga pengguna keyboard mendapat umpan balik yang sama dengan pengguna tetikus. Perbedaan :hover dan :focus-visible kita bahas pada Chapter Focus dan Focus-visible .
3. Blok prefers-reduced-motion: bagi pengguna yang mengurangi gerakan, kartu tidak terangkat — bayangan tetap berubah sebagai tanda interaksi, tanpa gerakan vertikal.

Karena probe otomatis tidak dapat mengarahkan kursor, demo chapter ini memeriksa keadaan dasar kartu: transform masih none, sementara transition-property dan durasinya sudah siap.

Pusat Absolut dengan translate(-50%, -50%) #

Mengawali urutan fungsi transform dengan translate(-50%, -50%) menggeser elemen sejauh setengah lebar dan setengah tingginya sendiri — persis jumlah yang dibutuhkan untuk mengoreksi posisi left: 50%; top: 50% yang menempel tepi kiri-atas elemen di titik tengah induk:

.overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Pada overlay 160px × 80px dalam induk 400px × 300px, nilai computed-nya berbunyi matrix(1, 0, 0, 1, -80, -40) — persen dihitung dari ukuran overlay sendiri, sebagaimana kita pelajari pada Chapter Translate, Rotate, dan Scale . Pola ini tetap relevan walau flexbox dan grid kini punya cara pemusatan yang lebih ringkas; dasar position-nya dibahas pada Chapter Absolute Positioning .

Badge, Kartu Flip, dan Lapisan Parallax #

Tiga pola berikut menuntaskan koleksi kita:

1. Badge diskon yang sedikit miring di pojok kartu: cukup rotate(-6deg) — derajat kecil memberi kesan semangat tanpa mengganggu keterbacaan. Demo mencatat matriksnya sebagai matrix(0.994522, -0.104528, 0.104528, 0.994522, 0, 0).
2. Kartu flip dua sisi untuk kartu pembelajaran: pembungkus preserve-3d, dua sisi dengan backface-visibility: hidden, sisi belakang rotateY(180deg) — seluruh resepnya dibedah pada Chapter 3D Transforms .
3. Lapisan parallax ringan: gambar latar yang sedikit diperbesar dengan scale(1.08) lalu digeser mengikuti gulungan lewat JavaScript. Persen pen-skalaan kecil ini memberi ruang gerak tanpa memunculkan tepi kosong. Gerak yang mengikuti gulungan termasuk kategori yang wajib dihormati prefers-reduced-motion .

Hasil di Browser:

Lima pola tampil berdampingan. Nilai computed yang diperiksa harness:
overlay terpusat → matrix(1, 0, 0, 1, -80, -40); kartu lift dalam keadaan
dasar → transform "none", transition-property "transform, box-shadow",
transition-duration "0.2s, 0.2s"; badge → matrix(0.994522, -0.104528,
0.104528, 0.994522, 0, 0); pembungkus flip → transform-style "preserve-3d"
dengan sisi ber-backface-visibility "hidden"; lapisan parallax →
matrix(1.08, 0, 0, 1.08, 0, 0).

Demo chapter ini (pola-penerapan.html) memuat kelima pola dengan tujuh pemeriksaan data-expected yang mencakup transform, transition-property, transition-duration, transform-style, dan backface-visibility.

/* Pola kartu lift: terangkat sedikit saat diarahkan kursor,
   dengan transisi pada properti yang murah (transform, box-shadow) */
.kartu {
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(226, 232, 240);
  border-radius: 12px;
  padding: 20px;
  max-width: 260px;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.kartu:hover,
.kartu:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgb(15 23 42 / 0.12);
}

/* Hormati preferensi pengguna yang mengurangi gerakan */
@media (prefers-reduced-motion: reduce) {
  .kartu {
    transition-duration: 0.01ms;
  }
  .kartu:hover,
  .kartu:focus-within {
    transform: none;
    box-shadow: 0 4px 10px rgb(15 23 42 / 0.10);
  }
}