如何创建：3D 翻转盒子

学习如何使用 CSS 创建一个翻转盒子。

如何创建一个翻转盒子

第一步 - 添加 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 - Tetapkan lebar dan tinggi yang Anda inginkan. Kita menambahkan atribut border untuk pertunjukan, saat mouse bergerak ke atas, boks berbalikan akan keluar dari kotak (jika efek 3D tidak diperlukan, 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 kursor mouse bergerak ke atas kontainer boks berbalikan, 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;
}
/* Tetapkan gaya depan */
.flip-box-front {
  background-color: #bbb;
  color: black;
}
/* Tetapkan gaya belakang */
.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

Coba sendiri

Putar Vertikal

Untuk melakukan putar vertikal bukannya horizontal, gunakan rotateX metodenya bukan rotateY：

Contoh

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

Coba sendiri

Perhatian:Contoh ini mungkin tidak berfungsi dengan baik di tablet komputer dan/atau ponsel.

Related pages

Tutorial:CSS 2D Transformation

Tutorial:Transformasi 3D CSS