Petua Reka Letak CSS: Amalan Terbaik untuk Melaksanakan Kesan Flip Kad Terapung-tutorial css-php.cn

Petua Reka Letak CSS: Amalan Terbaik untuk Melaksanakan Kesan Flip Kad Terapung

WBOY

Lepaskan： 2023-10-16 09:07:41

asal

1146 orang telah melayarinya

Petua Reka Letak CSS: Amalan Terbaik untuk Melaksanakan Kesan Flip Kad Terapung

Kesan flip kad terapung ialah kesan yang sangat biasa dalam reka bentuk web, yang boleh menjadikan halaman kelihatan lebih dinamik dan terang. Artikel ini akan memperkenalkan cara menggunakan CSS untuk mencapai kesan flip kad terapung dan memberikan contoh kod khusus.

Sebelum kita mula, kita perlu menjelaskan prinsip asas flipping kad terapung. Malah, kesan ini boleh dicapai dengan menggunakan atribut transformasi CSS. Kesan flip dicapai dengan membahagikan kad kepada dua bahagian, depan dan belakang, dan memutarkannya secara berasingan. Berikut ialah contoh kod khusus:

<html>
  <head>
    <style>
      .card {
        width: 300px;
        height: 200px;
        perspective: 1000px;
      }

      .card-inner {
        width: 100%;
        height: 100%;
        transition: transform 0.5s;
        transform-style: preserve-3d;
      }

      .card:hover .card-inner {
        transform: rotateY(180deg);
      }

      .card-front,
      .card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
      }

      .card-front {
        transform: rotateY(0deg);
        background-color: #e74c3c;
      }

      .card-back {
        transform: rotateY(180deg);
        background-color: #3498db;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div class="card">
      <div class="card-inner">
        <div class="card-front">
          <h2>正面</h2>
        </div>
        <div class="card-back">
          <h2>背面</h2>
        </div>
      </div>
    </div>
  </body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami telah mencipta div bernama "kad" dengan lebar 300px dan ketinggian 200px. Dengan menetapkan sifat perspektif, kita boleh mencipta kesan perspektif untuk menjadikan flip kelihatan lebih realistik.

Seterusnya, kami mencipta div yang dipanggil "card-inner" yang mengandungi bahagian hadapan dan belakang kad. Dengan menetapkan sifat gaya transformasi kepada preserve-3d, kita boleh mengekalkan hubungan perspektif antara muka depan dan belakang. Pada masa yang sama, dengan menetapkan atribut peralihan, kita boleh mencapai peralihan yang lancar bagi kesan flip.

Apabila tetikus melayang di atas kad, kita boleh mencapai kesan flip kad dengan menetapkan pemilih kelas pseudo :hover dan menetapkan nilai atribut transformasi .card-inner kepada rotateY (180deg).

Seterusnya, kami mencipta dua div, .kad-depan dan .kad-belakang, yang masing-masing mewakili bahagian hadapan dan belakang kad. Dengan menetapkan sifat keterlihatan muka belakang kepada tersembunyi, kami boleh mengalih keluar kesan kelipan apabila kad dibalikkan.

Dalam .card-depan, kami boleh menambah sebarang kandungan untuk menunjukkan bahagian hadapan kad. Dalam .card-back, kami menggunakan warna latar belakang dan teks berpusat untuk menunjukkan bahagian belakang kad.

Contoh kod yang diberikan di atas hanyalah pelaksanaan mudah bagi kesan flip kad terapung Anda boleh mengubah suai dan mengembangkannya mengikut keperluan anda sendiri. Saya berharap pengenalan dalam artikel ini dapat membantu anda menguasai kemahiran susun atur CSS dengan lebih baik dan mencapai kesan yang lebih hebat.

Atas ialah kandungan terperinci Petua Reka Letak CSS: Amalan Terbaik untuk Melaksanakan Kesan Flip Kad Terapung. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!