Kaedah dan teknik bagaimana untuk mencapai kesan putaran kiub imej melalui CSS tulen

Kaedah dan teknik bagaimana untuk mencapai kesan putaran kiub imej melalui CSS tulen

Dalam reka bentuk web moden, adalah sangat penting untuk menambah beberapa kesan hebat, dan menggunakan CSS untuk mencapai kesan putaran kiub adalah sangat menarik dan tugasan Mencabar yang unik. Artikel ini akan memperkenalkan kaedah dan teknik untuk mencapai kesan putaran kiub imej melalui CSS tulen, dan menyediakan beberapa contoh kod khusus.

Pertama, kita memerlukan struktur HTML asas, termasuk elemen bekas dan enam elemen muka, yang setiap satunya mengandungi imej.

<div class="cube">
   <div class="face">
      <img src="/static/imghw/default1.png"  data-src="image1.jpg"  class="lazy" alt="Image 1">
   </div>
   <div class="face">
      <img src="/static/imghw/default1.png"  data-src="image2.jpg"  class="lazy" alt="Image 2">
   </div>
   <div class="face">
      <img src="/static/imghw/default1.png"  data-src="image3.jpg"  class="lazy" alt="Image 3">
   </div>
   <div class="face">
      <img src="/static/imghw/default1.png"  data-src="image4.jpg"  class="lazy" alt="Image 4">
   </div>
   <div class="face">
      <img src="/static/imghw/default1.png"  data-src="image5.jpg"  class="lazy" alt="Image 5">
   </div>
   <div class="face">
      <img src="/static/imghw/default1.png"  data-src="image6.jpg"  class="lazy" alt="Image 6">
   </div>
</div>

Dalam kod di atas, elemen bekas ditakrifkan menggunakan "class=cube" dan setiap elemen muka ditakrifkan menggunakan "class=face".

Seterusnya, kita perlu menambah beberapa penggayaan CSS asas pada elemen bekas dan setiap elemen muka. Dalam contoh ini, kami akan menggunakan sifat transformasi dan animasi CSS 3D untuk mencapai kesan putaran kubus.

.cube {
   width: 200px;
   height: 200px;
   perspective: 800px;
   position: relative;
   transform-style: preserve-3d;
   animation: rotate 6s infinite linear;
}

.face {
   position: absolute;
   width: 200px;
   height: 200px;
   border: 1px solid #000;
}

@keyframes rotate {
   0% { transform: rotateY(0deg); }
   100% { transform: rotateY(360deg); }
}

.face img {
   width: 100%;
   height: 100%;
}

Dalam kod di atas, kami mentakrifkan sifat lebar, ketinggian dan perspektif elemen bekas dan menetapkan gaya transformasi 3D. Untuk elemen muka, kami menggunakan kedudukan mutlak dan menentukan lebar, ketinggian dan gaya sempadan.

Intinya ialah dalam elemen bekas, kami menggunakan atribut animasi "animasi" untuk mencapai kesan putaran kubus. Dengan mentakrifkan animasi kerangka utama "putar", kita boleh menggunakan sifat "transform" untuk memutarkan kubus di sekeliling paksi Y. Dalam contoh ini, kami menetapkan masa animasi kepada 6 saat dan menentukan gelung tak terhingga.

Akhir sekali, kita perlu menambah imej yang sepadan untuk setiap elemen muka. Dalam kod di atas, kami menggunakan enam imej berbeza yang dinamakan "image1.jpg" kepada "image6.jpg". Kami menggunakan pemilih "img" CSS untuk menetapkan lebar dan ketinggian imej kepada 100%.

Kini, dengan menggabungkan kod HTML dan kod CSS di atas, kita boleh melihat paparan imej dengan kesan putaran kiub.

Ini hanyalah contoh mudah, anda boleh menyesuaikan dan memanjangkannya mengikut keperluan anda. Sebagai contoh, anda boleh melaraskan saiz, warna dan gaya sempadan kontena dan elemen muka, atau menambah kesan animasi lain.

Ringkasnya, adalah satu cabaran yang sangat menarik untuk mencapai kesan putaran kiub imej melalui CSS tulen. Dengan menggunakan sifat transformasi 3D dan animasi CSS, kami boleh mencapai kesan ini dengan mudah dan menyesuaikannya mengikut keperluan kami. Saya harap kaedah dan teknik yang disediakan dalam artikel ini membantu anda, dan anda dialu-alukan untuk mencuba dan mencipta kesan yang lebih unik!

Atas ialah kandungan terperinci Kaedah dan teknik bagaimana untuk mencapai kesan putaran kiub imej melalui CSS tulen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!