Cara Membuat Flip Navbar 3D dengan HTML CSS

Sudah tau apa itu Navbar? okey sedikit saya bahas tentang penjelasan ya. Navbar adalah kependekan dari Navigation Bar, yaitu suatu bar panjang berbentuk frame yang berisi berbagai menu navigasi. Fitur-fitur Navbar bisa disesuaikan dengan yang dibutuhkan. Jadi saat sahabat membuat menu navigasi harus menunjang kemudahan untuk pengguna. 

Apakah sudah terbayang tentang tampilan Navbar , jadi sahabat ikutin langkah-langkah pembuatannya berikut ini:

Langkah pertama buat struktur tampilan pada file HTML dibawah ini

<div class="wrap">
		<div class="nav">
			<div class="front">
				<i class="fas fa-igloo"></i>
			</div>
			<div class="back">
				<a href="">Home</a>
			</div>
		</div>
		<div class="nav">
			<div class="front">
				<i class="fab fa-vuejs"></i>
			</div>
			<div class="back">
				<a href="">Vue JS</a>
			</div>
		</div>
		<div class="nav">
			<div class="front">
				<i class="fab fa-angular"></i>
			</div>
			<div class="back">
				<a href="">Angular</a>
			</div>
		</div>
		<div class="nav">
			<div class="front">
				<i class="fab fa-laravel"></i>
			</div>
			<div class="back">
				<a href="">Laravel</a>
			</div>
		</div>
		<div class="nav">
			<div class="front">
				<i class="fab fa-free-code-camp"></i>
			</div>
			<div class="back">
				<a href="">CI</a>
			</div>
		</div>
	</div>

pada code diatas saya buat frame 5 menu navigasi yang akan ditampilkan. Jadi sebagai tambahan saya sisipkan Icon dari Fontawesome agar lebih menarik.

Langkah selanjutnya tambahkan style CSS supaya tampilannya semakin menarik. sahabat perhatikan code dibawah ini:

body{
	margin:0;
	padding:0;
	background-color:#313131;
}
.wrap{
	height: 150px;
	width: 800px;
	position: absolute;
	margin:auto;
	top:0;
	bottom: 0;
	left:0;
	right: 0;
	perspective: 2000px;
	-webkit-perspective:2000px;
}
.nav{
	width: 20%;
	height: 150px;
	float: left;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
}

.front, .back
{
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	backface-visibility: hidden;
}

.nav:nth-child(1)>div
{
	background-color: #ff1f91;
}
.nav:nth-child(2)>div
{
	background-color: #ff65b4;
}
.nav:nth-child(3)>div
{
	background-color: #ff9fc2;
}
.nav:nth-child(4)>div
{
	background-color: #ec58a4;
}
.nav:nth-child(5)>div
{
	background-color: #ff0083;
}

a{
	color:#ffffff;
	text-decoration: none;
	text-transform: uppercase;
	font-size:25px;
	font-weight: 700;
}

.fas, .fab{
	font-size: 75px;
}

.back{
	position: relative;
	transform: rotateX(180deg);
	bottom: 150px;
}

.nav:hover{
	transform: rotateX(180deg);
	transition: 1s;
}

Coba simpan semua file diatas lalu jalankan pada browser, maka akan seperti berikut tampilannya:

Demikian pembahasan tentang membuat flip navbar 3d dengan html css, semoga bermanfaat dan sampai jumpa lagi dengan pembahasan lainnya.

terima kasih.