0Pricing
CSS Academy · Pelajaran

Transformasi Skew dan Matrix

Buat distorsi diagonal dengan skew() dan terapkan matriks transformasi lengkap dengan matrix().

Transformasi Skew dan Matrix adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

Transformasi skew()

skew() memiringkan elemen sepanjang satu atau kedua sumbu, sehingga menghasilkan distorsi miring atau menyerupai huruf miring pada elemen blok.

  <div class="diagonal-section">Section</div>
  <span class="italic-badge">Badge</span>

skewX() dan skewY()

Terapkan kemiringan secara terpisah pada setiap sumbu:

  <div class="banner">Slanted background</div>

Mengimbangi Kemiringan pada Elemen Anak

Saat sebuah wadah dimiringkan, elemen anaknya juga ikut miring. Terapkan kemiringan invers pada elemen anak agar tetap tegak:

  <div class="container"><p>Child text stays upright</p></div>

Transformasi matrix()

Fungsi matrix(a, b, c, d, tx, ty) adalah representasi matematika dasar dari transformasi 2D. Fungsi ini menggabungkan translate, rotate, scale, dan skew ke dalam satu operasi matriks.

  <div class="element">Matrix transform</div>

matrix3d() untuk 3D

matrix3d() memperluasnya menjadi 16 nilai untuk mengendalikan transformasi afin 3D secara menyeluruh. Fungsi ini biasanya dibuat oleh JavaScript untuk efek 3D yang kompleks.

Kemiringan Praktis: Bagian Diagonal

Pola desain yang populer — latar belakang bagian yang dimiringkan:

  <div class="section-diagonal"><p>Diagonal background section</p></div>

Kemiringan untuk Aksen UI

Kemiringan menciptakan daya tarik visual yang dinamis untuk lencana, aksen pita, dan teks yang disorot:

  <span class="badge"><span>NEW</span></span>

Perspektif untuk Konteks 3D

Transformasi 3D memerlukan konteks perspektif pada elemen induk. perspective menetapkan jarak dari pengamat ke bidang z=0.

  <div class="scene"><div class="card">Card</div></div>

Urutan Fungsi Transformasi

Urutan fungsi transformasi dalam deklarasi gabungan berpengaruh pada hasil. rotate then translate berbeda dari translate then rotate:

  <div class="scene-row">
    <span class="order-rotate-first">A</span>
    <span class="order-translate-first">B</span>
  </div>

Menganimasikan Kemiringan

Kemiringan dapat ditransisikan untuk efek penggeser dan pembalikan kartu. Gabungkan dengan transformasi lain untuk menghasilkan gerakan yang alami:

  <div class="card demo-active">Card</div>

Pemeriksaan Singkat

Sebuah elemen diberi transform: skewX(-15deg). Apa yang terjadi pada elemen anak berupa teks?

Ringkasan

skewX/Y() membuat distorsi miring untuk pemisah bagian dekoratif dan aksen UI yang dinamis. Terapkan kemiringan invers pada elemen anak agar kontennya tetap tegak. matrix() adalah matematika dasar yang menggabungkan semua transformasi 2D. Urutan fungsi transformasi yang dirangkai sangat memengaruhi hasil akhirnya.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Transformasi Skew dan Matrix” gratis?

Ya — teks lengkap “Transformasi Skew dan Matrix” 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 “Transformasi Skew dan Matrix”?

Buat distorsi diagonal dengan skew() dan terapkan matriks transformasi lengkap dengan matrix(). 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 2 dari 4.

Berapa lama pelajaran “Transformasi Skew dan Matrix” 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

  1. Translate, Rotate, dan Scale
  2. Transformasi Skew dan Matrix
  3. Asal Transformasi dan Perspektif
  4. Transformasi 3D: rotateX rotateY translateZ
← Kembali ke CSS Academy