Gambaran keseluruhan ciri baharu CSS3: Cara menggunakan CSS3 untuk mencapai kesan putaran

Ikhtisar ciri baharu CSS3: Cara menggunakan CSS3 untuk mencapai kesan putaran

Pengenalan:
CSS3 ialah standard untuk mengubah suai gaya elemen halaman web HTML. Berbanding dengan CSS2, CSS3 memperkenalkan banyak ciri baharu, salah satunya ialah kesan putaran. Menggunakan ciri penggiliran CSS3, kami boleh menambahkan animasi putaran pada elemen halaman web dengan mudah untuk menjadikan halaman lebih hidup dan menarik. Artikel ini akan memperkenalkan ciri penggiliran CSS3 dan memberikan beberapa contoh kod untuk dipelajari dan dirujuk oleh semua orang.

1. Atribut putaran CSS3
Dalam CSS3, terdapat dua atribut putaran utama: transform dan asal-ubah.

1. transform attribute
   Atribut transformasi digunakan untuk melaksanakan operasi transformasi seperti putaran, penskalaan dan pergerakan elemen. Kesan putaran tertentu boleh dicapai melalui sifat putaran, skala dan pencongan transformasi.
2. putar: Putar elemen, unit lalai ialah darjah.
3. skala: Elemen skala, nilai lalai ialah 1.
4. skew: Elemen condong, unit lalai ialah darjah. Atribut
5. transform-origin
   transform-origin digunakan untuk menetapkan kedudukan titik pusat putaran Nilai lalai ialah titik tengah elemen. Anda boleh menggunakan piksel (px), peratusan (%) atau kata kunci (atas, kanan, bawah, kiri) untuk menentukan kedudukan titik tengah putaran.

2. Contoh kod: Untuk mencapai kesan putaran imej
Berikut ialah contoh kod untuk menggunakan CSS3 untuk mencapai kesan putaran imej:

Kod HTML:

<div class="rotate-box">
  <img class="rotate-image lazy"  src="/static/imghw/default1.png"  data-src="image.jpg"  alt="旋转图片">
</div>

Kod CSS:

rreee

Analisis kod:

imej yang mengandungi Bekas div (kelas ialah .rotate-box) digunakan sebagai titik asas putaran.
Kelas imej ialah .putar-imej, tetapkan lebar dan tinggi kepada 200px, dan mulakan sudut putaran kepada 0deg.
Gunakan pemilih kelas pseudo :hover untuk menetapkan sudut putaran imej kepada 360deg apabila tetikus melayang untuk mencapai kesan putaran.
Gunakan atribut peralihan untuk menjadikan proses putaran mempunyai kesan peralihan yang lancar, dengan tempoh 0.5 saat dan mod pelonggaran.

3. Contoh kod: Laksanakan kesan putaran teks

Berikut ialah contoh kod yang menggunakan CSS3 untuk mencapai kesan putaran teks:

Kod HTML:

.rotate-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  background-color: #f7f7f7;
}

.rotate-image {
  width: 200px;
  height: 200px;
  transform: rotate(0deg);
  transition: transform 0.5s ease;
}

.rotate-image:hover {
  transform: rotate(360deg);
}

Kod CSS:

rreee

Analisis kod:

bekas div (class .rotate-text) Mengandungi label teks.
1. Tetapkan lebar, tinggi dan warna latar belakang bekas div dan capai penjajaran tengah.
2. Buat kesan perspektif dengan menetapkan atribut perspektif pada label teks.
3. Pindahkan kesan putaran 3D elemen induk label teks kepada elemen anak melalui atribut gaya transformasi untuk mencapai kesan putaran 3D.
4. Gunakan pemilih .hover pseudo-class untuk menetapkan sudut putaran kedua-dua paksi X dan paksi Y label teks kepada 360deg apabila tetikus melayang untuk mencapai kesan putaran 3D.
5. Gunakan atribut peralihan untuk menjadikan proses putaran mempunyai kesan peralihan yang lancar, tempohnya ialah 0.5 saat, dan mod pelonggaran adalah mudah.

Kesimpulan:

Ciri putaran CSS3 menambah kesan animasi yang kaya pada elemen halaman web, yang boleh meningkatkan pengalaman pengguna halaman web. Artikel ini menunjukkan cara menggunakan CSS3 untuk mencapai kesan putaran imej dan teks melalui dua contoh kod. Saya harap pembaca dapat menguasai ciri penggiliran CSS3 melalui kod sampel ini dan menggunakannya secara fleksibel dalam projek sebenar.

Atas ialah kandungan terperinci Gambaran keseluruhan ciri baharu CSS3: Cara menggunakan CSS3 untuk mencapai kesan putaran. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!