Bagaimana membuat: Kotak berbalik 3D

Belajar cara membuat kotak berbalik menggunakan CSS.

Bagaimana membuat kotak berbalik

Langkah pertama - Tambahkan HTML:

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Front Side</h2>
    </div>
    <div class="flip-box-back">
      <h2>Sisi Balik</h2>
    </div>
  </div>
</div>

Langkah kedua - Tambahkan CSS:

/* Kontainer boks flip - Atur lebar dan tinggi yang Anda inginkan. Kita menambahkan atribut border untuk pertunjukan, saat mouse menggantung, putar akan keluar dari kotak (jika Anda tidak ingin efek 3D, hapus perspective) */
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Hapus baris ini jika efek 3D tidak diperlukan */
}
/* Kontainer ini digunakan untuk menempatkan depan dan belakang */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
/* Saat mouse bergerak ke atas kontainer boks putar, lakukan putar horizontal */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}
/* Lokasi depan dan belakang */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
/* Atur gaya depan */
.flip-box-front {
  background-color: #bbb;
  color: black;
}
/* Atur gaya belakang */
.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

Coba sendiri

Putar Vertikal

Untuk melakukan putar vertikal daripada horizontal, gunakan rotateX metode daripada rotateY：

Contoh

.flip-box:hover .flip-box-inner {
  transform: rotateX(180deg);
}
.flip-box-back {
  transform: rotateX(180deg);
}

Coba sendiri

Perhatian:Beberapa contoh ini mungkin tidak berfungsi dengan benar di tablet dan/atau ponsel.

Halaman yang berhubungan

Panduan:Transformasi 2D CSS

Panduan:Transformasi 3D CSS