Tutorial : Flip Hover Navigation

Assalamualaikum & Salam Sejahtera

Salam jumaat semua . hari ni , nak update blog dengan tutorial yang aku sendiri lupa apis amek codenya dekat mana . sebab masa tu pakcik google banyak tolong . kemudian ada yang request this tutor , so nak taknak , kena buat juga . :)

Dashboard
TutoBies
Affiliate
Ask Me
Refresh

LIVE PREVIEW

For Template designer user . Pergi dekat Layout , kemudian Add A Gadget and paste code dibawah ni .

<style>
@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
.abc {
display:inline-block;
padding-top:2px;
width:90px;
font-family:tt;
font-size:8px;
text-transform:uppercase;
text-align:center;
color:#666;
background:#fff;
margin:2px;
border:1px solid #ccc5bc;
-webkit-transition:700ms;
-moz-transition:700ms;}

#f1_container {
  position: relative;
  margin: 10px auto;
  width: 145px;
  z-index: 1;
}
#f1_container {
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
}
#f1_card {
  width:145px;
 height:145px;
 border-radius:300px;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: all 1.0s linear;
  -moz-transform-style: preserve-3d;
  -moz-transition: all 1.0s linear;
  -o-transform-style: preserve-3d;
  -o-transition: all 1.0s linear;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#f1_container:hover #f1_card, #f1_container.hover_effect #f1_card {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  -webkit-transform: rotateY(180deg);
  -webkit-box-sizing: border-box;
  -moz-transform: rotateY(180deg);
  -moz-box-sizing: border-box;
  -o-transform: rotateY(180deg);
  -o-box-sizing: border-box;
  transform: rotateY(180deg);
  padding-top:33px;
  padding-right:5px;
  padding-bottom:5px;
  padding-left:5px;
  color: black;
  text-align: center;
  border:1px dashed #aaa;
  background-color: #fffaaa;
  border-radius:300px;
  font-family:tt;
  font-size:8px;
}
</style>
<div id="f1_container" class="hover">
  <div id="f1_card" class="shadow">
    <div class="front face">
      <img src="URL GAMBAR" width="140" style="background:white; border:1px dashed #aaa; border-radius:100px;padding:4px;"/>
    </div>
    <div class="back face center">
<center><a class="abc" href="URL KORANG"> TITLE  </a><br />
<a class="abc" href="URL KORANG"> TITLE  </a><br />
<a class="abc" href="URL KORANG">TITLE </a><br />
<a class="abc" href="URL KORANG">TITLE  </a><br />
<a class="abc" href="URL KORANG"> TITLE </a></center><br />
    </div>
    </div>
</div>

Edit mana yang nak di edit di SINI . kemudian save .


Untuk Classic Template , Copy code bawah ni , paste atas </style>

@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
.abc {
display:inline-block;
padding-top:2px;
width:90px;
font-family:tt;
font-size:8px;
text-transform:uppercase;
text-align:center;
color:#666;
background:#fff;
margin:2px;
border:1px solid #ccc5bc;
-webkit-transition:700ms;
-moz-transition:700ms;}

#f1_container {
  position: relative;
  margin: 10px auto;
  width: 145px;
  z-index: 1;
}
#f1_container {
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
}
#f1_card {
  width:145px;
 height:145px;
 border-radius:300px;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: all 1.0s linear;
  -moz-transform-style: preserve-3d;
  -moz-transition: all 1.0s linear;
  -o-transform-style: preserve-3d;
  -o-transition: all 1.0s linear;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#f1_container:hover #f1_card, #f1_container.hover_effect #f1_card {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  -webkit-transform: rotateY(180deg);
  -webkit-box-sizing: border-box;
  -moz-transform: rotateY(180deg);
  -moz-box-sizing: border-box;
  -o-transform: rotateY(180deg);
  -o-box-sizing: border-box;
  transform: rotateY(180deg);
  padding-top:33px;
  padding-right:5px;
  padding-bottom:5px;
  padding-left:5px;
  color: black;
  text-align: center;
  border:1px dashed #aaa;
  background-color: #fffaaa;
  border-radius:300px;
  font-family:tt;
  font-size:8px;
}

Kemudian , copy code dekat bawah ni , paste di mana bahagian yang korang nak .

<div id="f1_container" class="hover">
  <div id="f1_card" class="shadow">
    <div class="front face">
      <img src="URL GAMBAR" width="140" style="background:white; border:1px dashed #aaa; border-radius:100px;padding:4px;"/>
    </div>
    <div class="back face center">
<center><a class="abc" href="URL KORANG"> TITLE  </a><br />
<a class="abc" href="URL KORANG"> TITLE  </a><br />
<a class="abc" href="URL KORANG">TITLE </a><br />
<a class="abc" href="URL KORANG">TITLE  </a><br />
<a class="abc" href="URL KORANG"> TITLE </a></center><br />
    </div>
    </div>
</div>

Save . Siap .


Korang boleh ubah mana mana code yang di bold kan , tapi aku tak sarankan korang banyak sangat edit codenya , takut tak jadi macam yang aku punya . tapi kalau korang nak edit juga , terserah :D TQ .