Translate, Rotate, dan Scale
Pindahkan elemen dengan translate(), putar dengan rotate(), dan ubah ukurannya dengan scale().
Translate, Rotate, dan Scale adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.
Properti Transformasi
transform menerapkan transformasi visual 2D dan 3D pada elemen: perpindahan, rotasi, penskalaan, dan kemiringan. Transformasi terjadi setelah tata letak—tidak memengaruhi elemen di sekitarnya.
translate()
Memindahkan elemen dari posisi saat ini. Argumen: perpindahan x dan y.
<div class="card demo-active">Card</div>
<div class="wrap"><div class="centered">Centered</div></div>translateX() translateY() translateZ()
Fungsi untuk setiap sumbu agar lebih jelas:
<div class="slide-in active">Slide panel</div>rotate()
Memutar elemen sebesar sudut tertentu. Nilai positif memutar searah jarum jam.
<span class="icon demo-active">➤</span>
<span class="spinner">➤</span>scale()
Mengubah skala elemen secara seragam atau berdasarkan sumbu. Nilai kurang dari 1 mengecilkan; nilai lebih dari 1 membesarkan.
<button class="btn demo-active">Button</button>
<div class="thumb demo-active">Thumb</div>scaleX() dan scaleY()
Mengubah skala secara terpisah pada satu sumbu:
<div class="logo">LOGO</div>Menggabungkan Transformasi
Beberapa fungsi transformasi diterapkan secara berurutan (dari kanan ke kiri). Urutannya memengaruhi hasil.
<div class="card demo-active">Card</div>Asal Transformasi
transform-origin menetapkan titik poros untuk rotasi dan perubahan skala. Nilai bawaannya adalah bagian tengah (50% 50%).
<div class="card demo-active">Card</div>Properti Transformasi Individual
CSS modern memungkinkan Anda menetapkan setiap fungsi transformasi sebagai properti terpisah:
<div class="card demo-active">Card</div>Transisi dengan Transformasi
Transformasi adalah salah satu dari dua properti yang dikomposisikan oleh GPU. Selalu animasikan dengan transisi untuk menghasilkan efek yang mulus dan berperforma baik:
<div class="card demo-active">Card</div>translate() vs top/left
Selalu utamakan transform: translate() daripada top/left untuk animasi. Transformasi dikomposisikan oleh GPU; top/left memicu penghitungan ulang tata letak pada setiap frame.
Pemeriksaan Singkat
Fungsi transformasi mana yang mencerminkan elemen secara horizontal (seperti membalik kartu)?
Ringkasan
transform memindahkan, memutar, dan mengubah skala elemen setelah tata letak tanpa memengaruhi konten di sekitarnya. Gunakan translate() untuk perpindahan, rotate() untuk rotasi, dan scale() untuk mengubah ukuran. Rangkai beberapa fungsi dalam satu deklarasi. CSS modern mendukung properti transformasi individual. Selalu animasikan dengan transisi untuk performa yang dikomposisikan oleh GPU.
Belajar CSS dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Translate, Rotate, dan Scale” gratis?
Ya — teks lengkap “Translate, Rotate, dan Scale” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Translate, Rotate, dan Scale”?
Pindahkan elemen dengan translate(), putar dengan rotate(), dan ubah ukurannya dengan scale(). Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai CSS Academy?
Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Translate, Rotate, dan Scale” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Translate, Rotate, dan Scale
- Transformasi Skew dan Matrix
- Asal Transformasi dan Perspektif
- Transformasi 3D: rotateX rotateY translateZ