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.

Lengkapi tiga function untuk transform 3D. Kode awal sudah berisi function kosongnya dan baris console.log-nya; isi function-nya dan biarkan baris console.log seperti adanya.

  1. buildTransform(transforms) menerima array { type, value } dan mengembalikan string transform CSS: tiap item jadi type(valueSATUAN), dirangkai dengan satu spasi. Satuannya px untuk perspective dan translateZ (juga translateX, translateY), deg untuk rotateX, rotateY, rotateZ. Contoh: { type: "perspective", value: 1000 } jadi perspective(1000px), { type: "rotateY", value: -30 } jadi rotateY(-30deg).
  2. calculateFlipState(isFlipped, axis) mengembalikan rotateY(180deg) atau rotateX(180deg) kalau dibalik, dan rotateY(0deg) atau rotateX(0deg) kalau gak, sesuai axis ("Y" atau "X").
  3. parseTransformDeg(transformString, type) mengambil angka derajat untuk type itu dari dalam string, sebagai number. Contoh: parseTransformDeg("rotateY(45deg)", "rotateY") mengembalikan 45.

Yang dinilai, lima baris console harus persis, berurutan:

  1. perspective(1000px) rotateY(30deg)
  2. rotateY(180deg)
  3. rotateX(0deg)
  4. 45
  5. -30

Nilai kembaliannya juga dinilai langsung: buildTransform([{ type: "translateZ", value: 100 }, { type: "rotateX", value: -45 }]) harus translateZ(100px) rotateX(-45deg), calculateFlipState(true, "X") harus rotateX(180deg), dan parseTransformDeg("perspective(800px) rotateY(90deg)", "rotateY") harus 90.

Hint