Cara Membuat Animasi Flip Sederhana dengan CSS3

Halo, jumpa kembali dengan saya 🙂 , kali ini saya akan berbagi referensi dan trik mengenai bagaimana Cara Membuat Animasi Flip Sederhana dengan CSS3, sudah banyak artikel yang membahas mengenai cara membuat animasi flip ini, tapi tidak ada salah nya kalian mencoba trik ini untuk menambah referensi kalian dalan membuat animasi dengan CSS3. berikut langkah-langkah cara membuatnya.

Pertama-tama kita akan membuat struktur nya terlebih dahulu dengan kode HTML berikut.

<body>
	<input type="checkbox" id="block">
	<label for="block">Click Me !</label>
	<div class="frame">
		<div class="square"></div>
	</div>
</body>

Setelah kita membuat struktur nya, langkah selanjutnya adalah kita akan desai dan membuat animasi flip nya dengan kode CSS3 berikut.

.frame {
  width: 200px;
  height: 200px;
  background: cyan;
  opacity: 0.5;
  transition: all 0.75s linear;
  transform-style: preserve-3d;
}

input:checked ~ .frame {
  transform: rotateY(180deg);
}

.square {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  transform: rotateY(90deg);
}

Setelah semua kode diatas diketikan, silahkan simpan terlebih dahulu, kemudian jalankan pada browser masing-masing dan lihat hasinya. Selesai

Cukup mudah bukan ? Baik, cukup sekian tutorial mengenai bagaimana Cara Membuat Animasi Flip Sederhana dengan CSS3, semoga bermanfaat, amin.

Selamat mencoba 🙂