Create Responsive 3D Flip Navigation Bar

Its features:

  • It is completely responsive.

  • Touching the button will display a 3D flip animation.

  • You can add a link to the name of each menu.

  • You can change the model color via CSS if you want.

Try to create like yourself by following the codes below :

Step 1) Add to head : <meta name="viewport" content="width=device-width, initial-scale=1">
Step 2) Add to html : <h2>Create Responsive 3D Flip Navigation Bar</h2> <div class="row"> <div class="column one" style="background-color:;"></div> <div class="column two" style="background-color:;"> <div class="flip-box"> <div class="flip-box-inner"> <div class="flip-box-front"> <div class="eight"> <a href="#abcd">Home</a> </div> </div> <div class="flip-box-back"> <div class="thirteen"> <a href="#abcd">Home</a> </div> </div> </div> </div> </div> <div class="column three" style="background-color:;"> <div class="flip-box"> <div class="flip-box-inner"> <div class="flip-box-front"> <div class="eight"> <a href="#abcd">About Us</a> </div> </div> <div class="flip-box-back"> <div class="thirteen"> <a href="#abcd">About Us</a> </div> </div> </div> </div> </div> <div class="column four" style="background-color:;"> <div class="flip-box"> <div class="flip-box-inner"> <div class="flip-box-front"> <div class="eight"> <a href="#abcd">Contact Us</a> </div> </div> <div class="flip-box-back"> <div class="thirteen"> <a href="#abcd">Contact Us</a> </div> </div> </div> </div> </div> <div class="column five" style="background-color:;"> <div class="flip-box"> <div class="flip-box-inner"> <div class="flip-box-front"> <div class="eight"> <a href="#abcd">Privacy</a> </div> </div> <div class="flip-box-back"> <div class="thirteen"> <a href="#abcd">Privacy</a> </div> </div> </div> </div> </div> <div class="column six" style="background-color:;"> <div class="flip-box"> <div class="flip-box-inner"> <div class="flip-box-front"> <div class="eight"> <a href="#abcd">Investers</a> </div> </div> <div class="flip-box-back"> <div class="thirteen"> <a href="#abcd">Investers</a> </div> </div> </div> </div> </div> <div class="column seven" style="background-color:;"></div> </div>
Step 3) Add to css : * { box-sizing: border-box; } .column { float: left; padding: 2px; height: auto; } .one{ width:14.28%; } .two{ width:14.28%; } .three{ width:14.28%; } .four{ width:14.28%; } .five{ width:14.28%; } .six{ width:14.28%; } .seven{ width:14.28%; } .row:after { content: ""; display: table; clear: both; } .flip-box { background-color: transparent; width: 100%; height: 40px; border: 1px solid green; border-radius:30px; perspective: 1000px; } .flip-box-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; } .flip-box:hover .flip-box-inner { transform: rotateY(180deg); } .flip-box-front, .flip-box-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .flip-box-front { background-image: linear-gradient(#bbb, #ddd, #bbb); color: black; border-radius:30px; } .eight{ margin-top:9px; font-family:sans-serif; } .eight a{ text-decoration:none; color:black; } .thirteen{ margin-top:9px; font-family:sans-serif; } .thirteen a{ text-decoration:none; color:white; } .flip-box-back { background-image: linear-gradient(#69543e, #83694d, #69543e); color: white; transform: rotateY(180deg); border-radius:30px; }

Thank you sir

Congratulations to you on visiting our page.

If you have any feedback, you can give advice through the "Contact Me" form.