Flat Menu UI Efek Flip CSS3

Dengan semakin maraknya para pengguna design UI ( User Interface ) baik Flat UI, Semantic UI, maupun Fitur Bootstrap framework ke dalam template blogger. Kali ini saya persembahkan lagi contoh Flat Menu Ui dengan efek flip menggunakan transform CSS3, dan tentunya masih dikombinasikan dengan font icon awesome seperti artikel sebelumnya Kombinasi Menu Metro Ui dengan Font Awesome dan Drop Down Menu Metro UI Awesome.

Silakan lihat demonya dibawah ini :

DEMO

View Code

Sebagai komponen dasarnya adalah sebagai berikut :

CSS

Code:

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900);
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

Code:

nav ul {
  min-width: 600px;
  position: relative;
  display: table;
  margin: 50px auto;
  clear: both;
}

nav ul li {
  list-style: none;
  float: left;
}

nav ul li a {
    width: 100px;
    height: 100px;
    float: left;
    margin: 0 10px;
  -webkit-perspective: 600px;
     -moz-perspective: 600px;
      -ms-perspective: 600px;
          perspective: 600px;
}

nav ul li .front {
  text-align: center;
  -webkit-transform: rotateX(0deg) rotateY(0deg);
     -moz-transform: rotateX(0deg) rotateY(0deg);
      -ms-transform: rotateX(0deg) rotateY(0deg);
       -o-transform: rotateX(0deg) rotateY(0deg);
  -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

nav ul li:hover .front {
  -webkit-transform: rotateX(0deg) rotateY(180deg);
     -moz-transform: rotateX(0deg) rotateY(180deg);
      -ms-transform: rotateX(0deg) rotateY(180deg);
       -o-transform: rotateX(0deg) rotateY(180deg);
}

nav ul li .back {
  position: absolute;
  top: 0;
  width: inherit;
  height: inherit;
  text-align: center;
  z-index: -1;
  -webkit-transform: rotateX(0deg) rotateY(-180deg);
     -moz-transform: rotateX(0deg) rotateY(-180deg);
      -ms-transform: rotateX(0deg) rotateY(-180deg);
       -o-transform: rotateX(0deg) rotateY(-180deg);
  -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

nav ul li:hover .back {
  z-index: 1;
  -webkit-transform: rotateX(0deg) rotateY(0deg);
     -moz-transform: rotateX(0deg) rotateY(0deg);
      -ms-transform: rotateX(0deg) rotateY(0deg);
       -o-transform: rotateX(0deg) rotateY(0deg);
}

nav ul li i {
  line-height: 100px !important;
  color: white;
  vertical-align: middle !important;
}

nav ul li span {
  font-family: 'Roboto';
  font-size: 20px;
  font-weight: 300;
  line-height: 100px;
  color: white;
  text-transform: lowercase;
  vertical-align: middle;
}

nav ul li.color-1 .front,
nav ul li.color-1 .back {
  background-color: #3498db;
}

nav ul li.color-2 .front,
nav ul li.color-2 .back {
  background-color: #2ecc71;
}

nav ul li.color-3 .front,
nav ul li.color-3 .back {
  background-color: #1abc9c;
}

nav ul li.color-4 .front,
nav ul li.color-4 .back {
  background-color: #f39c12;
}

nav ul li.color-5 .front,
nav ul li.color-5 .back {
  background-color: #34495e;
}

HTML

Code:

<nav>
    <ul class="panel">
        <li class="color-1"> <a href="#">
                <div class="front">
                    <i class="fa fa-windows fa-4x"></i>
                </div>
                <div class="back">
                    <span>HOME</span>
                </div>
            </a>

seterusnya.......

        </li>
    </ul>
</nav>

SOURCE

 

menu yang lumayan bagus, tapi gak cocok dengan blog saya

 

Di bookmark dulu masbro.. Lumayan buat template layout website

 

tutorialnya keren-keren , mas ada gak tutorial bikin menu yang responsive ?

 

Itu tombolnya bukan dari gambar ya, seperti yg berekstensi .jpg .png .gif ?

 

kayanya sih itu 95% CSS semuanya

*CMIIW

 

nice info gan,,
<= blogger sibuk

 

Walaupun bukan selera saya yang lebih suka menu old school bawaan theme/template, saya akui tampilannya bagus mirip Windows 8.

 

Wew keren sih menutnya, tapi saya suka yang simple

 

Keren banget klo gitu.. biar load lebi cepet kan

 

wah kalau di pasang di blog saya sepertinya kebesaran, kurang pas aja menurut saya....

 

Gak bisa pasang nih.. gak cocok ama template

 

Kalau untuk membentuk gambar misalnya seperti gambar windows gitu caranya bagaimana ya?

 

pake ini mas http://fortawesome.github.io/Font-Awesome/icons/

 

Oh gitu.. baru paham, maklum masih pemula
Thanks Mas @Achmad Muharya

 

Dicocokin aja mas

 

Bener mas gambar diganti Font Icon awesome biar lebih cepet loadingnya..meminimalisir request HTTP bgus untuk SEO dan
untuk formatnya bisa masukkan dalam css code seperti ini :

@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

Atau bisa juga dengan eksternal CSS seperti ini

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

Kemudian untuk penulisannya seperti ini :

<i class="fa fa-home"></i> kode selengkapnya bisa dilihat disini

Kostumisasi font bisa baca disini

 

Untuk trial bisa pake ADD Gadget >> HTML/javascript dan masukkan kodenya seperti ini :

<style scoped="scoped" type="text/css">
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900);
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
nav ul li a {
width: 100px;
height: 100px;
float: left;
margin: 0 10px;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
perspective: 600px;
}
nav ul li .front {
text-align: center;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg);
-o-transform: rotateX(0deg) rotateY(0deg);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
nav ul li:hover .front {
-webkit-transform: rotateX(0deg) rotateY(180deg);
-moz-transform: rotateX(0deg) rotateY(180deg);
-ms-transform: rotateX(0deg) rotateY(180deg);
-o-transform: rotateX(0deg) rotateY(180deg);
}
nav ul li .back {
position: absolute;
top: 0;
width: inherit;
height: inherit;
text-align: center;
z-index: -1;
-webkit-transform: rotateX(0deg) rotateY(-180deg);
-moz-transform: rotateX(0deg) rotateY(-180deg);
-ms-transform: rotateX(0deg) rotateY(-180deg);
-o-transform: rotateX(0deg) rotateY(-180deg);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}

nav ul li:hover .back {
z-index: 1;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg);
-o-transform: rotateX(0deg) rotateY(0deg);
}
</style>

<nav>
<ul class="panel">
<li class="color-1">
<a href="#">
<div class="front">
<i class="fa fa-home fa-4x"></i>
</div>
<div class="back">
<span>home</span>
</div>
</a>
</li>
</ul>
</nav>

 

Ga pa2 mbak..buat pengetahuan aja

 

Saya laki-laki lo