Bagaimana untuk mencapai kesan membalikkan imej dalam CSS3

Dalam reka bentuk web, gambar adalah salah satu elemen yang sangat diperlukan. Selalunya terdapat keperluan untuk melakukan kesan khas pada gambar, seperti kesan menyelak gambar. Jadi bagaimana untuk menggunakan CSS3 untuk mencapai kesan flip imej? Artikel ini akan memperkenalkan secara terperinci kaedah untuk mencapai kesan flipping imej dalam CSS3.

1. Kesan membalikkan imej dalam CSS3

CSS3 memberi kita dua cara untuk membalikkan imej:

1. Gunakan atribut transformasi untuk membalikkan imej
2. Gunakan atribut keterlihatan belakang untuk membalikkan imej

2 Gunakan atribut transformasi untuk membalikkan imej

Atribut transformasi ialah atribut baharu dalam CSS3, yang boleh. merealisasikan terjemahan unsur-unsur Zum, putar dan condong. Antaranya, putaran adalah asas untuk mencapai kesan flip imej. Sintaks atribut transform adalah seperti berikut:

transform: translate(x,y) scale(x,y) rotate(deg) skewX(deg) skewY(deg);

Antaranya, rotate(deg) digunakan untuk menentukan sudut putaran elemen. Jika anda menetapkan nilai positif, ia bermakna putaran mengikut arah jam jika anda menetapkan nilai negatif, ia bermakna putaran lawan jam.

Untuk kesan flip imej, kita perlu menggunakan atribut rotateY(deg). rotateY(deg) digunakan untuk menentukan sudut di mana elemen diputarkan di sekeliling paksi Y. Jika anda menetapkan nilai positif, ia bermakna putaran mengikut arah jam jika anda menetapkan nilai negatif, ia bermakna putaran lawan jam.

Berikut ialah contoh kod CSS3 untuk mencapai kesan membalikkan imej:

.flip-container {
  perspective: 1000px; /* 设置透视点 */
}

.flipper {
  transition: 0.6s; /* 设置过渡特效 */
  transform-style: preserve-3d; /* 开启3D环境 */
  position: relative;
}

.front,
.back {
  backface-visibility: hidden; /* 隐藏背面 */
  position: absolute;
  top: 0;
  left: 0;
}

.front {
  z-index: 2;
}

.back {
  transform: rotateY(180deg); /* 初始角度为180度 */
}

.flipper:hover .front {
  transform: rotateY(-180deg); /* 翻转角度为-180度 */
}

.flipper:hover .back {
  transform: rotateY(0deg); /* 翻转角度为0度 */
}

3 Gunakan atribut keterlihatan muka belakang untuk mencapai flipping imej

Muka belakang-. atribut keterlihatan digunakan untuk menentukan elemen Sama ada bahagian belakang boleh dilihat, nilai lalai boleh dilihat. Apabila nilai disembunyikan, bahagian belakang elemen akan disembunyikan. Apabila melaksanakan kesan flip imej, kita boleh menggunakan atribut ini untuk mengawal paparan hadapan dan belakang imej.

Berikut ialah contoh menggunakan atribut backface-visibility untuk mencapai kesan flip imej:

.flip-container {
  perspective: 1000px; /* 设置透视点 */
}

.flip-container:hover .flipper {
  transform: rotateY(180deg); /* 翻转角度为180度 */
}

.flipper {
  transition: 0.6s; /* 设置过渡特效 */
  transform-style: preserve-3d; /* 开启3D环境 */
  position: relative;
}

.front,
.back {
  backface-visibility: hidden; /* 隐藏背面 */
  position: absolute;
  top: 0;
  left: 0;
}

.front {
  z-index: 2;
}

.back {
  transform: rotateY(180deg); /* 初始角度为180度 */
}

4 Ringkasan

CSS3 menyediakan pelbagai cara untuk mencapai kesan flip imej, antaranya Atribut transformasi dan keterlihatan belakang adalah dua kaedah yang paling biasa digunakan, dan prinsip pelaksanaannya adalah berdasarkan persekitaran 3D. Melalui demonstrasi kod sampel di atas, semua orang boleh belajar cara menggunakan CSS3 untuk mencapai kesan flip imej, dan menguasai idea pelaksanaan asas kesan ini.

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