Latihan 1: Transform CSS: Translate, Rotate, Scale — CSS

Latihan 1 dari materi Transform CSS: Translate, Rotate, Scale di CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kotak kuning aku kotak mau dipindah dan diperbesar sekaligus. Isi baris transform: ; yang sudah ada di rule div dengan satu nilai yang:

menggeser kotak 100px ke kanan dan 150px ke bawah: translate(100px, 150px)
memperbesarnya 1.5 kali: scale(1.5)

Tulis keduanya di satu transform, dipisah spasi, dengan translate duluan baru scale. Kalau scale ditulis duluan, geserannya ikut diperbesar dan kotaknya kejauhan. Jangan tulis transform: dua kali: yang kedua menimpa yang pertama.

Hint

Geser dan perbesar itu dua fungsi, tapi ditulis di satu properti transform yang sama, dipisah spasi.
translate(x, y) menggeser ke kanan dan ke bawah, scale(n) memperbesar. Tulis translate dulu, karena scale yang ditulis duluan ikut memperbesar geserannya.
div { height: 100px; width: 100px; position: relative; background: yellow; transform: translate(100px, 150px) scale(1.5); }

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Transform CSS: Translate, Rotate, Scale — CSS

Hint

Memperbarui Aplikasi