Latihan 1: 3D Transform & Perspective — CSS

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

Kartu di editor punya dua sisi, .card-front dan .card-back. Siapkan buat efek balik 3D dengan tiga baris CSS, masing-masing menggantikan komentarnya:

Di aturan .card-container: perspective: 1000px;
Di aturan .card: transform-style: preserve-3d;
Di aturan .card-front, .card-back: backface-visibility: hidden;

HTML-nya jangan diubah. Kalau benar, yang kelihatan cuma sisi depan, karena sisi belakang sedang membelakangi kamu.

Hint

Efek balik 3D butuh tiga hal: jarak mata di pembungkus, ruang 3D yang dijaga di kartu, dan sisi yang disembunyikan waktu membelakangi kamu.
Pakai perspective di .card-container, transform-style di .card, dan backface-visibility di aturan .card-front, .card-back.
.card-container { perspective: 1000px; } .card { transform-style: preserve-3d; } .card-front, .card-back { backface-visibility: hidden; }

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: 3D Transform & Perspective — CSS

Hint

Memperbarui Aplikasi