Transform & Composite

CSS Transform adalah properti paling penting untuk animasi karena perubahan transform tidak memicu layout ulang (reflow). Transform diproses di GPU (compositor layer), sehingga sangat performant.

Transform Functions

Translate (Pindah posisi)

/* translateX — geser horizontal */
.move-right { transform: translateX(100px); }

/* translateY — geser vertikal */
.move-down { transform: translateY(50px); }

/* translate — geser X dan Y */
.move-diagonal { transform: translate(100px, 50px); }

/* Bisa pakai persen (relatif terhadap ukuran elemen) */
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Rotate (Putar)

.rotate-45 { transform: rotate(45deg); }
.rotate-quarter { transform: rotate(0.25turn); }

/* 3D rotation */
.flip-x { transform: rotateX(180deg); }
.flip-y { transform: rotateY(180deg); }

Scale (Perbesar/perkecil)

/* Perbesar 1.5x */
.grow { transform: scale(1.5); }

/* Perkecil jadi 80% */
.shrink { transform: scale(0.8); }

/* Scale X dan Y terpisah */
.stretch { transform: scaleX(1.5) scaleY(0.8); }

Skew (Miring)

.skew-x { transform: skewX(15deg); }
.skew-y { transform: skewY(10deg); }
.skew-both { transform: skew(15deg, 5deg); }

Menggabungkan Transform

Beberapa transform bisa digabungkan dalam satu properti — urutan penting!

/* Rotate dulu, lalu translate */
.a { transform: rotate(45deg) translateX(100px); }

/* Translate dulu, lalu rotate — hasil BERBEDA */
.b { transform: translateX(100px) rotate(45deg); }

/* Contoh: Card hover effect */
.card {
  transition: transform 0.3s ease;
}
.card:hover {
  transform: translateY(-8px) scale(1.02);
}

Transform Origin

Menentukan titik pusat transformasi:

/* Default: center center */
.default { transform-origin: center center; }

/* Rotasi dari sudut kiri atas */
.from-top-left {
  transform-origin: top left;
  transform: rotate(45deg);
}

/* Rotasi dari bawah */
.from-bottom {
  transform-origin: bottom center;
  transform: rotate(-15deg);
}

/* Gunakan nilai piksel atau persen */
.custom-origin {
  transform-origin: 20px 50%;
}

Composite Layers & GPU Acceleration

Browser memproses halaman dalam beberapa layer. Elemen yang menggunakan transform atau opacity bisa dipromosi ke compositor layer tersendiri dan diproses oleh GPU:

/* Properti yang di-composite (GPU-accelerated): */
/* - transform */
/* - opacity */

/* Properti yang BUKAN composite (trigger reflow/repaint): */
/* - width, height */
/* - top, left, right, bottom */
/* - margin, padding */
/* - background-color */

will-change

Memberi hint ke browser bahwa properti akan berubah, agar browser bisa mengoptimasi:

/* Beritahu browser bahwa transform akan berubah */
.animate-soon {
  will-change: transform;
}

/* Setelah animasi selesai, hapus will-change */
/* (via JavaScript atau state management) */

Peringatan: Jangan pakai will-change pada terlalu banyak elemen! Setiap elemen dengan will-change akan mendapat layer sendiri yang memakan memori.

/* JANGAN lakukan ini */
* {
  will-change: transform;  /* Memakan banyak memori! */
}

/* Lebih baik — hanya pada elemen yang benar-benar dianimasi */
.animated-card {
  will-change: transform, opacity;
}

Contoh: 3D Card Flip

.card-container {
  perspective: 1000px;
}

.card-inner {
  position: relative;
  width: 300px;
  height: 200px;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.card-container:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

.card-back {
  transform: rotateY(180deg);
}

Selalu prioritaskan transform dan opacity untuk animasi. Hindari menganimasi properti yang memicu layout (width, height, top, left) kecuali benar-benar diperlukan.