Transformasi CSS – Terjemah, Putar, Skala dan Serong

Kuliah 12: Perubahan CSS – Terjemah, Putar, Skala dan Serong

Selamat datang ke kuliah kedua belas kursus "Asas kepada Kecemerlangan". Hari ini, kami akan meneroka Transformasi CSS, ciri berkuasa yang membolehkan anda memanipulasi kedudukan, saiz dan orientasi elemen. Kami akan merangkumi asas fungsi transformasi seperti translate(), rotate(), scale(), dan skew().

---

1. Transform Property Overview

Harta transformasi membolehkan anda menggunakan pelbagai transformasi pada elemen, seperti menterjemah, memutar, menskala dan menyerong. Transformasi ini digunakan secara relatif kepada kedudukan asal elemen.

• Sintaks:

  transform: transform-function(value);

---

2. Terjemah

Fungsi translate() menggerakkan elemen dari kedudukan asalnya di sepanjang paksi X dan Y. Anda boleh menentukan nilai dalam piksel (px), peratusan (%) atau unit lain.

• Contoh: Menterjemah elemen 50px ke kanan dan 30px ke bawah.

  .box {
    transform: translate(50px, 30px);
  }

Dalam contoh ini, elemen .box akan mengalihkan 50px ke kanan dan 30px ke bawah daripada kedudukan asalnya.

---

3. Putar

Fungsi rotate() memutarkan elemen di sekeliling titik tetap, yang merupakan pusat elemen secara lalai. Sudut putaran dinyatakan dalam darjah (deg).

• Contoh: Memusingkan elemen sebanyak 45 darjah.

  .box {
    transform: rotate(45deg);
  }

Dalam kes ini, elemen .box akan diputar 45 darjah mengikut arah jam mengelilingi pusatnya.

---

4. Skala

Fungsi skala() mengubah saiz elemen. Anda boleh menentukan faktor penskalaan untuk paksi X dan Y. Nilai 1 bermaksud saiz asal elemen, manakala nilai yang lebih besar atau lebih kecil daripada 1 masing-masing menambah atau mengurangkan saiz.

• Contoh: Menskalakan elemen kepada 1.5 kali ganda saiz asalnya.

  .box {
    transform: scale(1.5);
  }

Dalam contoh ini, elemen .box akan diskalakan sehingga 150% daripada saiz asalnya.

---

5. Serong

Fungsi skew() menyerong elemen di sepanjang paksi X dan Y. Sudut dinyatakan dalam darjah (deg).

• Contoh: Memusing elemen 20 darjah di sepanjang paksi-X dan 10 darjah di sepanjang paksi-Y.

  .box {
    transform: skew(20deg, 10deg);
  }

Dalam kes ini, elemen .box akan dicondongkan 20 darjah secara mendatar dan 10 darjah secara menegak.

---

6. Menggabungkan Fungsi Transformasi

Anda boleh menggabungkan berbilang fungsi transformasi dalam satu sifat transformasi. Fungsi-fungsi tersebut digunakan dalam susunan ia muncul.

• Contoh: Menggabungkan terjemah, putar dan skala.

  .box {
    transform: translate(50px, 30px) rotate(45deg) scale(1.5);
  }

Dalam contoh ini:

• Kotak .akan terlebih dahulu diterjemahkan, kemudian diputar, dan akhirnya diskalakan. Setiap transformasi digunakan secara berurutan.

---

7. Transform Origin

Harta asal transformasi menentukan titik di sekeliling perubahan berlaku. Secara lalai, ini ialah pusat elemen, tetapi anda boleh menukarnya ke mana-mana titik.

• Contoh: Menukar asal transformasi ke penjuru kiri sebelah atas.

  .box {
    transform-origin: top left;
    transform: rotate(45deg);
  }

Dalam kes ini, .box akan berputar 45 darjah di sekeliling sudut kiri atasnya dan bukannya tengahnya.

---

8. Perubahan 3D

CSS juga menyokong transformasi 3D. Anda boleh menggunakan fungsi seperti perspective(), rotateX(), rotateY(), dan translateZ() untuk mencipta kesan 3D.

• Contoh: Menambah perspektif untuk mencipta kesan 3D.

  .container {
    perspective: 1000px;
  }

  .box {
    transform: rotateY(45deg);
  }

Dalam contoh ini:

• Elemen .container memberikan perspektif, menjadikan .box kelihatan berputar dalam ruang 3D.

---

Amalkan Senaman

1. Buat animasi flip kad menggunakan transformasi CSS. Kad harus berputar 180 darjah pada tuding untuk mendedahkan bahagian belakang.
2. Percubaan dengan menggabungkan terjemah, putar dan skala untuk mencipta kesan unik pada elemen.

---

Seterusnya: Dalam kuliah seterusnya, kami akan menyelami Animasi CSS dan belajar cara mencipta kesan animasi yang dinamik untuk elemen web anda. Bersedia untuk menghidupkan reka bentuk anda dengan gerakan!

---

Ikuti saya di LinkedIn-

Ridoy Hasan

Atas ialah kandungan terperinci Transformasi CSS – Terjemah, Putar, Skala dan Serong. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!