Transformasi Skew dan Matriks
Cipta herotan pepenjuru dengan skew() dan gunakan matriks transformasi penuh dengan matrix().
Transformasi Skew dan Matriks ialah pelajaran CSS Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.
Transformasi skew()
skew() mencondongkan elemen sepanjang satu atau kedua-dua paksi, lalu menghasilkan herotan condong atau seakan-akan italik pada elemen blok.
<div class="diagonal-section">Section</div>
<span class="italic-badge">Badge</span>skewX() dan skewY()
Gunakan kecondongan secara berasingan pada setiap paksi:
<div class="banner">Slanted background</div>Membetulkan Kecondongan Elemen Anak
Apabila bekas dicondongkan, elemen anaknya turut condong. Gunakan kecondongan songsang pada elemen anak supaya kekal tegak:
<div class="container"><p>Child text stays upright</p></div>Transformasi matrix()
Fungsi matrix(a, b, c, d, tx, ty) ialah perwakilan matematik asas bagi 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() mengembangkan transformasi kepada 16 nilai untuk kawalan lengkap terhadap transformasi afin 3D. Biasanya, fungsi ini dijana oleh JavaScript untuk menghasilkan kesan 3D yang kompleks.
Kecondongan Praktikal: Bahagian Diagonal
Corak reka bentuk yang popular — latar belakang bahagian yang dicondongkan:
<div class="section-diagonal"><p>Diagonal background section</p></div>Kecondongan untuk Aksen Antara Muka Pengguna
Kecondongan menghasilkan daya tarikan visual yang dinamik untuk lencana, aksen reben dan teks yang diserlahkan:
<span class="badge"><span>NEW</span></span>Perspektif untuk Konteks 3D
Transformasi 3D memerlukan konteks perspektif pada elemen induk. perspective menetapkan jarak dari pemerhati ke satah z=0.
<div class="scene"><div class="card">Card</div></div>Susunan Fungsi Transformasi
Susunan fungsi transformasi dalam pengisytiharan gabungan adalah penting. rotate then translate berbeza daripada translate then rotate:
<div class="scene-row">
<span class="order-rotate-first">A</span>
<span class="order-translate-first">B</span>
</div>Menganimasikan Kecondongan
Kecondongan boleh dialihkan untuk menghasilkan kesan peluncur dan pembalikan kad. Gabungkannya dengan transformasi lain untuk menghasilkan pergerakan yang lebih semula jadi:
<div class="card demo-active">Card</div>Semakan Pantas
Satu elemen mempunyai transform: skewX(-15deg). Apakah yang berlaku kepada elemen anak yang mengandungi teks?
Ringkasan
skewX/Y() menghasilkan herotan condong untuk pemisah bahagian hiasan dan aksen antara muka pengguna yang dinamik. Gunakan kecondongan songsang pada elemen anak supaya kandungannya kekal tegak. matrix() ialah matematik asas yang menggabungkan semua transformasi 2D. Susunan fungsi transformasi yang dirantaikan amat mempengaruhi hasil akhirnya.
Pelajari CSS dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Soalan Lazim
Adakah pelajaran “Transformasi Skew dan Matriks” percuma?
Ya — teks penuh “Transformasi Skew dan Matriks” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Transformasi Skew dan Matriks”?
Cipta herotan pepenjuru dengan skew() dan gunakan matriks transformasi penuh dengan matrix(). Anda berlatih CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan CSS Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.
Berapa lamakah pelajaran “Transformasi Skew dan Matriks” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Translate Rotate dan Scale
- Transformasi Skew dan Matriks
- Asal Transformasi dan Perspektif
- Transformasi 3D: rotateX rotateY translateZ