3D Flipping Menu Menggunakan Widget

Sudah lama AjatShare tidak posting mengenai kode css, sekarang kita coba membuat 3D Flipping Menu Menggunakan Widget dengan memakai kode css.

Ilustrasi dari 3D Flipping Menu, dimana mouse didekatkan maka tulisan pada menu akan berputar dan kembali kesemula. Langsung saja kita praktek :

Seperti biasa bukan account blogger anda
Klik pada Template > Edit HTML > Proceed
Gunakan ctrl F cari kode ]]></b:skin>
dan copy paste kode di bawah ini tepat di atas 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;
}

/* animasi */
.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;
}

Save template


Masuk ke Layout > Add a widget (dibagian bawah header)
Pilih HTML/JavaScript dan paste kode di bawah ini

<ul class="block-menu">
  <li><a href="#" class="three-d">
    Home
    <span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span>
  </a></li>
  <li><a href="#" class="three-d">
    About<span class="three-d-box"><span class="front">About</span><span class="back">About</span></span>
  </a></li>
  <li><a href="#" class="three-d">
    Services
    <span class="three-d-box"><span class="front">Services</span><span class="back">Services</span></span>
  </a></li>
  <li><a href="#" class="three-d">
    Blogging
    <span class="three-d-box"><span class="front">Blogging</span><span class="back">Blogging</span></span>
  </a></li>
  <li><a href="#" class="three-d">
    Create this
    <span class="three-d-box"><span class="front">Create this</span><span class="back">Create this</span></span>
  </a></li>
</ul>

Simpan widget tanpa judul dan lihat hasilnya.

Ditulis Oleh : ajatshare ~ AjatShare

Anda sedang membaca sebuah artikel yang berjudul 3D Flipping Menu Menggunakan Widget, Semoga artikel tersebut bermanfaat untuk anda, Mohon maaf apabila konten yang anda baca rusak atau salah dalam penulisan. Jika ada pertanyaan, kritik, dan saran yang ingin di sampaikan silahkan tulis di kotak komentar

:: Terima Kasih ! ::

Bagikan ke teman : FacebookTwitterGoogle+LinkedinTechnoratiDigg

Artikel terkait :