3D Flipping Menu Menggunakan Widget - Hallo sahabat Affiliate Marketing, Pada Artikel yang anda baca kali ini dengan judul 3D Flipping Menu Menggunakan Widget, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Navigasi, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : 3D Flipping Menu Menggunakan Widget
link : 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.

Demikianlah Artikel 3D Flipping Menu Menggunakan Widget

Sekianlah artikel 3D Flipping Menu Menggunakan Widget kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel 3D Flipping Menu Menggunakan Widget dengan alamat link https://sugengwawa.blogspot.com/2013/08/3d-flipping-menu-menggunakan-widget.html