Membuat Flip Card dengan CSS3

Jika kemarin kita sudah membahas bagaimana cara membuat hover menarik dengan efek zoom, maka sekarang kita akan mencoba berkreasi kembali dengan fitur hover ini. Hover yang akan kita coba buat kali ini adalah flip card. Yap, sekarang kita akan mencoba bagaimana sih cara membuat flip card dengan CSS3. Flip card disini adalah objek gambar yang akan berputar ke sisi gambar lainya pada saat kita hover gambar tersebut. Sehingga gambar sisi lainya akan muncul, seperti saat kita memutar balikan kartu kira-kira seperti itu gambaranya.

Untuk membuat flip card ini terbilang cukup mudah, kalian bisa ikuti langkah-langkah berikut ini. Pertama tentu kalian harus membuat tampilanya terlebih dahulu. Untuk mempersingkat waktu kalian bisa salin contoh code berikut ini.

flip.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>

Setelah sudah kalian simpan file tersebut dengan nama sesuai dengan keinginan kalian, namun jangan lupa formatnya harus .html. Sekarang kita lanjut untuk membuat style css. Kalian bisa salin kembali code berikut 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);
}

Kalian simpan file cssnya dengan nama style.css. Dan jangan lupa untuk menyimpan kedua file tersebut dalam satu folder agar programnya dapat berjalan dengan lancar. Sekarang kita lihat hasilnya dengan membuka file html tersebut pada browser kalian. Jika berhasil maka tampilanya akan seperti ini.

membuat-flip-card-dengan-css3-rangga1-270717 membuat-flip-card-dengan-css3-rangga2-270717

Gambar diatas adalah tampilan awal sebelum dihover.

membuat-flip-card-dengan-css3-rangga3-270717 membuat-flip-card-dengan-css3-rangga4-270717

Gambar diatas adalah saat setelah dihover.

Mudah bukan ? Sekian pembahasan mengenai bagaimana cara membuat flip card dengan CSS3. Semoga bermanfaat.

 

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *