Bagaimana untuk mencapai kesan flip dalam css3

Kesan flip ialah salah satu kesan yang paling banyak digunakan dalam reka bentuk web moden. Ia boleh digunakan dalam pelbagai senario, seperti memaparkan produk, mencipta animasi, dan menambah hiburan pada tapak web. Pada masa lalu, mencapai kesan ini biasanya memerlukan menggunakan JavaScript untuk memanipulasi elemen DOM. Walau bagaimanapun, kini kita boleh menggunakan ciri baharu dalam CSS3 untuk mencapai kesan ini.

CSS3 menyediakan beberapa sifat transformasi baharu, yang membolehkan pembangun mencapai kesan flip elemen dengan mudah. Berikut ialah beberapa atribut yang biasa digunakan:

1. transform-style: preserve-3d;

Atribut ini boleh mengubah elemen anak unsur menjadi ruang tiga dimensi . Atribut ini diperlukan jika anda ingin mencapai kesan flip. Jika preserve-3d tidak ditetapkan, hanya elemen itu sendiri akan dibalikkan, manakala elemen anak akan menjadi lemah atau kehilangan kesannya.

2. transform-origin: 50% 50%;

Atribut ini boleh menetapkan titik tengah proses flip. Secara lalai, titik tengah berada di tengah elemen. Kedudukan titik tengah boleh diubah dengan mengubahsuai nilai harta ini. Sifat ini berguna dalam kesan flip. Sebagai contoh, jika anda mahu elemen terbalik ke kanan, titik tengah boleh ditetapkan ke kiri.

3. perspektif: 1000px;

Atribut ini boleh menetapkan jarak antara pemerhati dan elemen, iaitu jarak perspektif. Jarak perspektif mempengaruhi kesan flipping. Secara lalai, jarak perspektif ialah 0 dan elemen diratakan. Dalam flipping, lebih besar jarak perspektif, lebih baik kesan flipping.

4. transform: rotateY(180deg);

Atribut ini boleh menetapkan darjah putaran paksi Y bagi elemen. Apabila nilainya positif, elemen itu terbalik ke kanan; apabila nilainya negatif, ia terbalik ke kiri.

Atribut di atas boleh digunakan dalam kombinasi untuk mencapai kesan flip yang berbeza.

Sebagai contoh, kita boleh menetapkan gaya berikut untuk elemen mencapai kesan flip asas:

.flip-container {
  perspective: 1000px;
}

.flip-container:hover .flipper{
  transform: rotateY(180deg);
}

.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}

.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.front {
  z-index: 2;
}

.back {
  transform: rotateY(180deg);
}

Menggunakan gaya CSS di atas, anda boleh membalikkan elemen 180 darjah dan meletakkannya sebelum dan selepas Paparkan kandungan pada kedua-dua belah pihak.

Melalui ciri transformasi yang berkuasa dalam CSS3, pembangun web boleh mencipta kesan flip yang licin, jelas dan interaktif, menjadikan reka bentuk halaman web lebih berwarna.

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan flip dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!