Cara Membuat Flip Card dengan CSS3

Hallo teman-teman,kali ini kita akan belajar cara membuat flip card dengan CSS3. Flip card ini berguna untuk memberikan informasi dengan lebih interaktif dan terlihat lebih keren. Sehingga pengunjung website akan merasa tertarik dengan website kita.

Ada beberapa fungsi css yang akan kita gunakan pada praktek kali ini. Disini kita akan menggunakan fungsi transform: rotate();. Fungsi transform ini akan membantu teman-teman untuk memutarkan objek, pada contoh kali ini kita gabung dengan fungsi transition: sehingga saat memutarkan objek ada sedikit gerakan slow motion yang terlihat seperti animasi. Langsung saja teman-teman buat dahulu file htmlnya seperti ini.

index.html

<html>
	<head>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div class="container" >
			<div class="flipper">
				<div class="depan">
					<!-- front content -->depan
				</div>
				<div class="belakang">
					<!-- back content -->belakang
				</div>
			</div>
		</div>
	</body>
</html>

lalu buat file cssnya seperti ini

style.css

.container {
	width: 320px;
	height: 480px;
	margin:auto;
	perspective: 1000px;
	border:1px solid black;
}
/*saat meng-hover container terjadi rotate*/
.container:hover .flipper{
	transform: rotateY(180deg);
}

/*fungsi rotate 3d dengan durasi*/
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;

}

/*menyembunyikan bagian belakang saat terjadi rotate*/
.depan, .belakang {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

/*pengaturan ukuran warna, dan rotasi*/
.depan, .belakang {
	color: white;
	width: 320px;
	height: 480px;
}

.belakang{
	background: red;
	transform: rotateY(180deg);
}
.depan{
	background: blue;
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

Jika sudah maka teman-teman coba buka di browsernya dan lihat hasilnya.

Nanti teman-teman bisa tambahkan sendiri pada isi dari flip card tersebut dengan gambar atau informasi menarik lainya.

Sekian pembelajaran mengenai cara membuat flip card dengan CSS3. Semoga bermanfaat.