Latihan 1: 3D Animations dengan CSS — Web Animation

Latihan 1 dari materi 3D Animations dengan CSS di Web Animation — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Implementasikan CSS 3D transform string builder.

buildTransform(transforms) — terima array of transform objects, kembalikan string CSS transform:

{ type: "perspective", value: 1000 } → "perspective(1000px)"
{ type: "rotateX", value: 45 } → "rotateX(45deg)"
{ type: "rotateY", value: -30 } → "rotateY(-30deg)"
{ type: "translateZ", value: 100 } → "translateZ(100px)"
Gabungkan semua dengan spasi

calculateFlipState(isFlipped, axis) — kembalikan string CSS transform untuk card flip:

Jika isFlipped && axis === "Y" → "rotateY(180deg)"
Jika isFlipped && axis === "X" → "rotateX(180deg)"
Jika tidak di-flip → "rotateY(0deg)" atau "rotateX(0deg)" sesuai axis

parseTransformDeg(transformString, type) — ekstrak nilai derajat dari string transform.

Contoh: parseTransformDeg("rotateY(45deg)", "rotateY") → 45

Hint

buildTransform terima array of { type, value }. Map tiap item ke string sesuai type, join dengan spasi.
Unit: perspective & translateZ pakai "px", rotateX/Y/Z pakai "deg", scale tanpa unit. Contoh: perspective(1000px) rotateY(30deg).
Fungsi pendamping (getAngle, dll) ekstrak atau validasi value numerik. Cek test case: angka 0 tetap ditulis "rotateX(0deg)", nilai negatif tetap ditulis apa adanya.