Kembali lagi dengan saya. kali ini saya akan berbagi tutorial CSS yaitu membuat efek flip pada elemen div.ya efek flip itu adalah efek seperti kotak berbalik saat elemen di hover (pointer mouse berada diatas elemen).oke langsung saja, disini kita akan memfokuskan pada styling CSS nya. Kita buat kotak dasar...

Efek Flip pada Box Elemen

Kembali lagi dengan saya. kali ini saya akan berbagi tutorial CSS yaitu membuat efek flip pada elemen div.
ya efek flip itu adalah efek seperti kotak berbalik saat elemen di hover (pointer mouse berada diatas elemen).
oke langsung saja, disini kita akan memfokuskan pada styling CSS nya.

Kita buat kotak dasarnya terlebih dahulu. yang dimaksud dengan kotak dasar adalah kotak paling luar dari elemen flip nanti.

.flip3d {float: none;
		width:300px;
		height:280px;
		font-size:25px;
		margin: auto;}

Kemudian kita buat style untuk tampilan depan. tampilan pertama elemen sebelum di hover

.flip3d > .depan { position:absolute;
				transform:perspective( 600px ) rotateY( 0deg );
				width:300px;
				height:280px;
				padding:10px;
				background:#096;
				font-weight:bold;
				backface-visibility:hidden;
				transition:transform .5s linear 0s;}

style untuk tampilan belakang. tampilan yang akan muncul saat elemen di hover

.flip3d > .belakang {position:absolute;
				transform:perspective( 600px ) rotateY( 180deg );
				width:300px;
				height:280px;
				background:#069;
				color:white;
				padding:10px;
				backface-visibility:hidden;
				transition:transform .5s linear 0s;}

Pemberian efek flip pada elemen. style ini memerintahkan elemen untuk berbalik 180 derajat saat dihover

.flip3d:hover > .depan{transform:perspective( 600px ) rotateY( -180deg );}
.flip3d:hover > .belakang{transform:perspective( 600px ) rotateY( 0deg );}

Berikut full codenya

<html>
<title>Flipbox</title>
<style>
body { font-family:Arial, Helvetica, sans-serif; margin-top:50px;}
.flip3d {float: none;
		width:300px;
		height:280px;
		font-size:25px;
		margin: auto;}
.flip3d > .depan { position:absolute;
				transform:perspective( 600px ) rotateY( 0deg );
				width:300px;
				height:280px;
				padding:10px;
				background:#096;
				font-weight:bold;
				backface-visibility:hidden;
				transition:transform .5s linear 0s;}
.flip3d > .belakang {position:absolute;
				transform:perspective( 600px ) rotateY( 180deg );
				width:300px;
				height:280px;
				background:#069;
				color:white;
				padding:10px;
				backface-visibility:hidden;
				transition:transform .5s linear 0s;}
.flip3d:hover > .depan{transform:perspective( 600px ) rotateY( -180deg );}
.flip3d:hover > .belakang{transform:perspective( 600px ) rotateY( 0deg );}

</style>
<body>
<center><span style="font-size:20px">Hover elemen dibawah ini untuk menampilkan efek flip</span></center>
<p>&nbsp;<p>

<div class='flip3d'>
  <div class='belakang'>
  <center>
  <span class="lobster">Belakang</span>
  </center>
  </div>
  <div class='depan'>
  <center>
  <span class='glyphicon glyphicon-globe' aria-hidden='true'></span>
  <span class="lobster">Depan</span>
  </center>
  </div>
</div>
</body>
</html>

 


About Author

Boy Panjaitan

I'm Developer


Comment & Discussions

    Please LOGIN before if you want to give the comment.