fbpx

3D Flipping Menu Menggunakan Widget

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.

Tags:
Previous Post

Back to Top dengan Efek JQuery

Next Post

Cara Jitu Mempercepat Loading Blog

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Hosting Unlimited Indonesia
0

Your Cart