Flat Menu UI Efek Flip CSS3

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

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 {
  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

<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>

Silakan anda kreasikan sendiri sesuai kebutuhan agar tampilan lebih maksimal, dan untuk HTML kode selengkapnya bisa dilihat di View Code ...!!!

Enjoy Blogging