Gunakan CSS Transform untuk mengubah elemen

Penggunaan Transform dalam CSS

Sifat Transform CSS ialah alat yang sangat berkuasa yang boleh melakukan operasi seperti terjemahan, putaran, penskalaan dan menyengetkan elemen HTML. Ia boleh mengubah penampilan elemen secara mendadak dan menjadikan halaman web lebih kreatif dan dinamik. Dalam artikel ini, kami akan memperkenalkan pelbagai kegunaan Transform secara terperinci dan memberikan contoh kod khusus.

1. Terjemah (Terjemah)

Terjemahan merujuk kepada menggerakkan elemen pada jarak tertentu di sepanjang paksi-x dan paksi-y. Sintaksnya adalah seperti berikut:
transform: translate(x, y);
x dan y ialah nilai terjemahan dalam arah mendatar dan menegak, yang boleh menjadi nombor positif (kanan atau bawah) atau nombor negatif (kiri atau atas) . Berikut ialah contoh:

.box {
  width: 200px;
  height: 200px;
  background-color: red;
  transform: translate(50px, 100px);
}

Kod ini akan menjadikan segi empat sama merah dengan lebar dan tinggi 200px bergerak 50px ke kanan secara mendatar dan 100px ke bawah secara menegak.

2. Putar

Putaran merujuk kepada memutarkan elemen di sekeliling pusat putarannya. Sintaksnya adalah seperti berikut:
transform: rotate(angle);
angle ialah sudut putaran, yang boleh menjadi nombor positif (putaran mengikut arah jam) atau nombor negatif (putaran lawan jam). Berikut ialah contoh:

.box {
  width: 200px;
  height: 200px;
  background-color: blue;
  transform: rotate(45deg);
}

Kod ini akan memutarkan segi empat sama biru dengan lebar dan tinggi 200px 45 darjah mengikut arah jam.

3. Skala

Skala merujuk kepada melaraskan saiz elemen mengikut nisbah yang ditentukan. Sintaksnya adalah seperti berikut:
transform: skala(x, y);
x dan y ialah nisbah penskalaan dalam arah mendatar dan menegak, yang boleh menjadi nombor kurang daripada 1 (zum masuk) atau nombor lebih besar daripada 1 ( mengezum masuk). Berikut ialah contoh:

.box {
  width: 200px;
  height: 200px;
  background-color: green;
  transform: scale(0.5, 2);
}

Kod ini akan menjadikan segi empat sama hijau dengan lebar dan tinggi 200px mengecut kepada separuh saiz asalnya dalam arah mendatar dan menggandakan saiz asalnya dalam arah menegak.

4. Skew

Skew merujuk kepada elemen senget di sepanjang paksi-x dan paksi-y. Sintaksnya adalah seperti berikut:
transform: skew(sudut-x, sudut-y);
sudut-x dan sudut-y ialah sudut kecondongan pada paksi-x dan paksi-y, yang boleh menjadi nombor positif atau negatif. Berikut ialah contoh:

.box {
  width: 200px;
  height: 200px;
  background-color: yellow;
  transform: skew(30deg, -10deg);
}

Kod ini akan menjadikan segi empat sama kuning dengan lebar dan tinggi 200px condong 30 darjah mengikut arah jam pada paksi-x dan 10 darjah lawan jam pada paksi-y.

Ringkasan:

Transform dalam CSS ialah sifat yang sangat berguna yang boleh mengubah bentuk dan kedudukan elemen melalui operasi seperti terjemahan, putaran, penskalaan dan kecondongan. Artikel ini memperkenalkan pelbagai kegunaan Transform dan menyediakan contoh kod khusus. Dengan menggunakan atribut Transform secara fleksibel, kami boleh mencipta kesan halaman web yang lebih kreatif dan dinamik. Saya harap artikel ini akan membantu anda untuk belajar dan berlatih!

Atas ialah kandungan terperinci Gunakan CSS Transform untuk mengubah elemen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!