Cara Membuat Flip an Image

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti January 29, 2021

Di bawah ini kita akan mempelajari cara membalik gambar (menambahkan efek cermin) dengan CSS.

Arahkan mouse ke atas gambar:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img:hover {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
</style>
</head>
<body>

<h2>Contoh Flip an Image</h2>
<p>Arahkan mouse ke atas gambar:.</p>

<img src="https://dosenit.com/wp-content/uploads/2020/10/140185_1234217273488_400_300.jpg" alt="anime" width="400" height="300">
  
  <p>Gambar akan efek cermin dan berpindah ke sebelah</p>

</body>
</html>

Cara Membuat Flip an Image(Membalikan Gambar)

Contoh

<style>
img:hover {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
</style>

<img src="https://dosenit.com/wp-content/uploads/2020/10/140185_1234217273488_400_300.jpg" alt="Paris">

Flip an Image 3D dengan Teks

<!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: #555;
  color: white;
  transform: rotateY(180deg);
}
</style>
</head>
<body>

<h1>Image Flip with Text</h1>
<h3>Arahkan kursor ke gambar di bawah:</h3>

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <img src="https://dosenit.com/wp-content/uploads/2020/10/140185_1234217273488_400_300.jpg" alt="anime" style="width:300px;height:200px">
    </div>
    <div class="flip-box-back">
      <h2>Conan</h2>
      <p>Conan dan Shinichi</p>
    </div>
  </div>
</div>

</body>
</html>

Kita juga akan mempelajari cara melakukan animasi 3D membalik gambar(flip an image) dengan teks, berikut ini langkah-langkahnya:

Langkah 1) Tambahkan HTML:
Contoh

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <img src="https://dosenit.com/wp-content/uploads/2020/10/140185_1234217273488_400_300.jpg" alt="Paris" style="width:300px;height:200px">
    </div>
    <div class="flip-box-back">
      <h2>Conan</h2>
      <p>Conan dan Shinichi</p>
    </div>
  </div>
</div>

Langkah 2) Tambahkan CSS:
Contoh

/* Container untuk kotak flip - atur lebar dan tinggi sesuai keinginan masing-masing. Kita akan menambahkan properti border untuk menunjukkan bahwa flip itu sendiri keluar dari kotak saat melayang (hapus perspektif jika  tidak menginginkan efek 3D */
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Hapus ini jika  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 wadah 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 pada sisi depan (mundur jika gambar hilang) */
.flip-box-front {
  background-color: blue;
  color: black;
}

/* Atur gaya sisi belakang*/
.flip-box-back {
  background-color: blue;
  color: white;
  transform: rotateY(180deg);
}