Apa yang dapat dilakukan CSS transforms?

Question

Accepted Answer

Properti `transform` memungkinkan Anda untuk **memindahkan, menskala, memutar, dan mencondongkan** elemen secara visual — tanpa memengaruhi tata letak dokumen (elemen lain tidak bergeser). Dipercepat GPU, menjadikannya ideal untuk animasi.

```css
.box { transform: translate(50px, 20px); }  /* move right 50px, down 20px */
.box { transform: scale(1.5); }              /* 1.5× bigger (0.5 = half) */
.box { transform: rotate(45deg); }           /* rotate clockwise 45° */
.box { transform: skew(10deg); }             /* slant */
```

## Menggabungkan transforms (urutan penting)

```css
.box {
  transform: translateX(100px) rotate(45deg) scale(1.2);
  /* applied right-to-left: scale, then rotate, then translate */
}
```

Banyak fungsi diterapkan secara berurutan; mengubah urutan mengubah hasil (memutar lalu menerjemahkan berbeda dari menerjemahkan lalu memutar).

## Mengapa transforms tidak mengganggu tata letak

```css
.icon:hover { transform: scale(1.2); } /* grows on hover but neighbors DON'T move */
```

Tidak seperti mengubah `width`/`margin`, transform hanya memengaruhi tampilan *yang dicat* elemen, bukan kotaknya dalam aliran — jadi elemen sekitarnya tetap di tempat dan tidak ada reflow. Ini persis mengapa transforms lancar.

## Pola umum

```css
/* center an absolutely-positioned element */
.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* hover lift */
.card:hover { transform: translateY(-4px); }

/* 3D and perspective */
.card { transform: perspective(500px) rotateY(15deg); }
```

Trik pemusatan `translate(-50%, -50%)` ada di mana-mana — itu menggeser elemen kembali sebesar setengah ukuran *miliknya sendiri*.

## Kinerja

```css
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
```

Karena transforms melewati tata letak dan cat (hanya compositing), menganimasikan mereka tetap pada 60fps — jauh lebih murah daripada menganimasikan posisi/ukuran.

## Mengapa ini penting

Transforms adalah kuda kerja animasi CSS dan mikro-interaksi (hover lifts, modals, carousel, loading spinners).

Mereka memindahkan/menskala/memutar tanpa memicu tata letak, jadi mereka kuat dan andal — cara yang direkomendasikan untuk menganimasikan gerakan di web.