Efek Flip dengan CSS3

Efek Flip dengan CSS3
March 5, 2014 mirzailhami

Ada banyak efek animasi yang dapat dibuat dengan CSS3, yaitu dengan memanfaatkan translasi, rotasi dan transformasi. Salah satu efek yang cukup terkenal adalah efek flip.

Efek Flip pada Flipboard

Efek Flip pada Flipboard

Efek flip cukup terkenal sejak diterapkan pada aplikasi Flipboard. Baiklah, mari kita mulai.

HTML

Berikut ini adalah kode HTMLnya.

 
Terdiri dari dua bagian, yaitu “front” dan “back”. Bagian front adalah bagian depan sebelum terjadi efek flip. Sedangkan back adalah bagian belakang yang akan muncul ketika efek flip terjadi.

CSS

Kemudian dilanjutkan dengan kode CSS berikut.

/* perspektif untuk kontainer */
.flip-container {
	perspective: 1000;
}

/* flip, ketika hover */
.flip-container:hover .flipper, .flip-container.hover .flipper {
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}

.flip-container, .front, .back {
	width: 320px;
	height: 480px;
}

/* kecepatan slip dapat diatur */
.flipper {
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-ms-transition: 0.6s;
	-moz-transition: 0.6s;
	-moz-transform: perspective(1000px);
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

.front, .back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-moz-transition: 0.6s;
	-moz-transform-style: preserve-3d;
	-o-transition: 0.6s;
	-o-transform-style: preserve-3d;
	-ms-transition: 0.6s;
	-ms-transform-style: preserve-3d;
	transition: 0.6s;
	transform-style: preserve-3d;
	position: absolute;
	top: 0;
	left: 0;
}

/* bagian depan */
.front {
	-webkit-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	background: lightgreen;
z-index: 2;
}

/* bagian belakang */
.back {
	background: lightblue;
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

 
Mungkin sebelumnya sudah banyak tutorial CSS flip yang dijelaskan panjang lebar. Namun, tutorial singkat ini cukup sederhana, tidak banyak baris koding. Lalu, bagaimana selanjutnya?

Efek flip ini dapat Anda terapkan untuk keperluan tertentu. Saya sendiri menggunakannya untuk edit form di halaman User Dashboard di Meublo. Contoh penerapan lainnya misalnya dibagian user channel di Youtube. Atau Anda juga dapat menggunakannya untuk membuat portfolio, menampilkan menu makanan, dan lainnya.

Efek flip ini berjalan dengan baik di Google Chrome, Firefox dan Opera.