Cara Membuat Flip Box Pada Website

Di bawah ini kita akan mempelajari cara membuat flip box dengan CSS.

Section Artikel

1 Flip Box
2 Flip Box Horizontal
3 Flip Box Vertikal

Flip Box

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

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

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

.flip-box-front {
  background-color: #bbb;
  color: black;
}

.flip-box-back {
  background-color: Yellow;
  color: white;
  transform: rotateY(180deg);
}
  .flip-box2 {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
}

.flip-box-inner2 {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box2:hover .flip-box-inner2 {
  transform: rotateX(180deg);
}

.flip-box-front2, .flip-box-back2 {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-front2 {
  background-color: #bbb;
  color: black;
}

.flip-box-back2 {
  background-color: ForestGreen;
  color: white;
  transform: rotateX(180deg);
}
</style>
</head>
<body>

<h1>3D Flip Box (Horizontal)</h1>
<h3>Hover over the box below:</h3>

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Tampak Depan</h2>
    </div>
    <div class="flip-box-back">
      <h2>Tampak Belakang</h2>
    </div>
  </div>
</div>
  
<h1>3D Flip Box (Vertical)</h1>
<h3>Hover over the box below:</h3>

<div class="flip-box2">
  <div class="flip-box-inner2">
    <div class="flip-box-front2">
      <h2>Tampak Depan</h2>
    </div>
    <div class="flip-box-back2">
      <h2>Tampak Belakang</h2>
    </div>
  </div>
</div>

</body>
</html>

Flip Box Horizontal

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

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

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

.flip-box-front {
  background-color: #bbb;
  color: black;
}

.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}
</style>
</head>
<body>

<h1>3D Flip Box (Horizontal)</h1>
<h3>Hover over the box below:</h3>

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Tampak Depan</h2>
    </div>
    <div class="flip-box-back">
      <h2>Tampak Belakang</h2>
    </div>
  </div>
</div>

</body>
</html>

Langkah 1) Tambahkan HTML:
Contoh

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Tampak Depan</h2>
    </div>
    <div class="flip-box-back">
      <h2>Tampak Belakang</h2>
    </div>
  </div>
</div>

Langkah 2) Tambahkan CSS:
Contoh

/* Contaoiner kotak flip - atur lebar dan tinggi sesuai dengan keinginan. Kami telah menambahkan properti perbatasan untuk menunjukkan bahwa flip itu sendiri keluar dari kotak saat melayang (hapus perspektif jika Anda tidak menginginkan efek 3D */
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Hapus ini jika Anda tidak menginginkan efek 3D */
}

/* container ini diperlukan untuk memosisikan sisi depan dan belakang */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Lakukan flip horizontal saat menggerakkan mouse ke atas container flip box */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* Posisikan sisi depan dan belakang */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style untuk sisi depan */
.flip-box-front {
  background-color: #bbb;
  color: black;
}

/* Style untuk sisi belakang */
.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

Flip Box Vertikal

Untuk melakukan flip vertikal alih-alih horizontal, gunakan metode rotateX daripada rotateY:
Contoh

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

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

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

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

.flip-box-front {
  background-color: #bbb;
  color: black;
}

.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateX(180deg);
}
</style>
</head>
<body>

<h1>3D Flip Box (Vertical)</h1>
<h3>Hover over the box below:</h3>

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Tampak Depan</h2>
    </div>
    <div class="flip-box-back">
      <h2>Tampak Belakang</h2>
    </div>
  </div>
</div>

</body>
</html>

CSS How To

Cara Membuat Flip Box Pada Website

Flip Box

Flip Box Horizontal

Flip Box Vertikal

11 Cara Mengatasi Touchscreen Hp Android Error

Cara Menskalakan Elemen Saat Melakukan Hover

You may also like