3D Flipping Menu For Blogger
* buka blog mu
* pilih template >>> edit HTML
* cari kode ]]></b:skin>
* dan letakkan kode dibawah tepat diatas kode ]]></b:skin>
.block-menu {
display: block;
background: #000;
}
.block-menu li {
display: inline-block;
}
.block-menu li a {
color: #fff;
display: block;
text-decoration: none;
font-family: 'Passion One',Arial,sans-serif;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
text-transform: uppercase;
overflow: visible;
line-height: 20px;
font-size: 24px;
padding: 15px 10px;
}
/* animation domination */
.three-d {
-webkit-perspective: 200px;
-moz-perspective: 200px;
perspective: 200px;
-webkit-transition: all .07s linear;
-moz-transition: all .07s linear;
transition: all .07s linear;
position: relative;
}
.three-d:not(.active):hover {
cursor: pointer;
}
.three-d:not(.active):hover .three-d-box,
.three-d:not(.active):focus .three-d-box {
-moz-transform: translateZ(-25px) rotateX(90deg);
-webkit-transform: translateZ(-25px) rotateX(90deg);
-o-transform: translateZ(-25px) rotateX(90deg);
transform: translateZ(-25px) rotateX(90deg);
}
.three-d-box {
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-ms-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
-webkit-transform: translatez(-25px);
-moz-transform: translatez(-25px);
-o-transform: translatez(-25px);
transform: translatez(-25px);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
.front {
-webkit-transform: rotatex(0deg) translatez(25px);
-moz-transform: rotatex(0deg) translatez(25px);
-o-transform: rotatex(0deg) translatez(25px);
transform: rotatex(0deg) translatez(25px);
}
.back {
-webkit-transform: rotatex(-90deg) translatez(25px);
-moz-transform: rotatex(-90deg) translatez(25px);
-o-transform: rotatex(-90deg) translatez(25px);
transform: rotatex(-90deg) translatez(25px);
color: #FFE7C4;
}
.front, .back {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: black;
padding: 15px 10px;
color: white;
pointer-events: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
* kemudian letakkan kode dibawah di antara kode <header> atau </header><ul class='block-menu'> <li><a class='three-d' href='http://taichiho.blogspot.co.id/'>Home <span class='three-d-box'><span class='front'>Home</span><span class='back'>Home</span></span> </a></li> <li><a class='three-d' href='#'>About<span class='three-d-box'><span class='front'>About</span><span class='back'>About</span></span> </a></li> <li><a class='three-d' href='#'>Services <span class='three-d-box'><span class='front'>Services</span><span class='back'>Services</span></span> </a></li> <li><a class='three-d' href='#'>Blogging <span class='three-d-box'><span class='front'>Blogging</span><span class='back'>Blogging</span></span> </a></li> <li><a class='three-d' href='#'>Create this <span class='three-d-box'><span class='front'>Create this</span><span class='back'>Create this</span></span> </a></li> <li><a class='three-d' href='#'>Contact <span class='three-d-box'><span class='front'>Contact</span><span class='back'>Contact</span></span> </a></li> <li><a class='three-d' href='#'>Like This <span class='three-d-box'><span class='front'>Like This</span><span class='back'>Like This</span></span> </a></li> </ul>>>> KETERANGAN <<<
Ganti warna merah dengan url masing''
[ terakhir silahkan di save template ]
*** GOOD LUCK ***
Baca Juga Artikel Terkait Lainnya