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.