Cara menggunakan kesan flip CSS (contoh kod)

Dalam reka bentuk web, kesan flip adalah kesan yang sangat biasa, yang boleh menambahkan rasa tiga dimensi dan dinamik pada halaman web, dan kod kesan flip CSS boleh mencapai kesan ini dengan mudah.

Yang berikut akan memperkenalkan cara menggunakan kod kesan flip CSS.

1. Gunakan atribut transform untuk mencapai kesan flip

Menggunakan atribut transform ialah cara yang agak mudah untuk mencapai kesan flip. Kesan flip yang berbeza boleh ditetapkan melalui berbilang nilai.

Contohnya, dengan menetapkan transform:rotateX(180deg), anda boleh mencapai kesan membalikkan 180 darjah sepanjang paksi X, dan dengan menetapkan transform:rotateY(180deg), anda boleh mencapai kesan membalikkan 180 darjah sepanjang paksi Y. Perlu diingatkan bahawa ciri animasi CSS3 mesti disokong dalam pelayar.

2. Gunakan animasi CSS3 untuk mencapai kesan flip

Selain menggunakan atribut transform, ciri animasi yang disediakan oleh CSS3 juga boleh mencapai kesan flip. Antaranya, menggunakan ciri animasi, bingkai yang berbeza boleh digunakan untuk mencapai kesan yang berbeza. Dengan menetapkan masa animasi, kelajuan dan parameter lain, anda boleh mencapai pelbagai jenis kesan flip dinamik yang berbeza.

Sebagai contoh, anda boleh menggunakan kod berikut untuk mencapai kesan flip kiri dan kanan:

.flip-container {
  perspective: 1000px;
  position: relative;
}
 
.flipper {
  position: absolute;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
 
.front, .back {
  position: absolute;
  top: 0;
  left: 0;
}
 
.front {
  z-index: 2;
  transform: rotateY(0deg);
}
 
.back {
  transform: rotateY(180deg);
}
 
.flip-container:hover .flipper {
  transform: rotateY(180deg);
}

3. Gunakan peralihan CSS3 untuk mencapai kesan flip

Anda juga boleh menggunakan kesan peralihan CSS3 untuk mencapai kesan flip. Tidak seperti ciri animasi, kesan peralihan menetapkan keadaan awal dan keadaan akhir, dan kemudian secara automatik beralih ke keadaan akhir. Kesan flip yang berbeza boleh dicapai dengan menetapkan parameter seperti masa peralihan dan kesan.

Sebagai contoh, anda boleh menggunakan kod berikut untuk mencapai kesan flip atas dan bawah:

.box {
  position:relative;
  width:160px;
  height:200px;
}
.box .front,
.box .back {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  -webkit-transition:all 0.5s ease-in-out;
          transition:all 0.5s ease-in-out;
}
.box .front {
  background:rgba(255, 192, 203, 0.8);
  z-index:2;
}
.box .back {
  -webkit-transform:rotateX(-180deg);
          transform:rotateX(-180deg);
  background:rgba(143, 188, 143, 0.8);
  z-index:1;
}
.box:hover .front {
  -webkit-transform:rotateX(180deg);
          transform:rotateX(180deg);
  z-index:1;
}
.box:hover .back {
  -webkit-transform:rotateX(0deg);
          transform:rotateX(0deg);
  z-index:2;
}

Ringkasan:

Kesan flip CSS adalah sangat kesan reka bentuk web praktikal yang boleh digunakan untuk halaman web Tambah lebih tiga dimensi dan dinamik. Dengan menggunakan atribut transform, animasi CSS3 dan sifat peralihan, anda boleh mencapai pelbagai jenis kesan flip dengan mudah, memperkayakan ekspresi dan kesan visual reka bentuk web.

Atas ialah kandungan terperinci Cara menggunakan kesan flip CSS (contoh kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!