CSS Flower Navigasi Efek Rotasi

Menu Navigasi Blog Desain Flower Style

CSS Flower Navigasi Efek Rotasi - Menampilkan menu dengan perintah hover dan menggabungkan beberapa pengaturan CSS animasi-transisi adalah hal yang tersulit saat membuat menu navigasi seperti ini. Untuk memberikan hasil yang terbaik buat sahabat pecinta SAHABAT BLOGGER 77. Untuk desain, saya membuat bentuknya seperti bunga (flower) yang akan tampil saat menu link di hover dengan efek rotasi seperti ini:




DEMO SHOW    GET IN CODE



Referensi Animasi Concept ➟ Box Shadow Magic


Seperti Tampilan Menu Navigasi Terbaru Dengan Bentuk Daun diartikel sebelumnya, maka secara umum jika ada bunga (flower) maka ada daun (leaf). Kesempatan pada tutorial kali ini, saya akan coba Membuat Menu Navigasi Dengan Bentuk Bunga Efek Rotasi menggunakan CSS seperti ini:

/*!CSS flower navigation menu
inspect at: 'oct 23,2014'
visit: http://sahabatblogger77.blogspot.com/
*
type code: no javascript (lisenci MTT)
author: Devy indriyani
*/
.flower {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  margin:80px auto;}

.flower .spinner,.flower .inner,
.flower .counterspin {height: 100%;}
.flower .spinner {animation: spin 45s infinite linear;}
.flower .counterspin {animation: counter-spin 45s infinite linear;}

.flower .cover {
  width: 120px;
  height: 120px;
  background: url(http://Url-Gambar Anda.jpg);
  background-size: 100%;
  border-radius: 50%;
  box-shadow: 0 0 2px 4px #d1d1d1, 0 0 20px 4px #000;
  position: absolute;
  top: 0;}

.flower a {display: block;}
.flower .child {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  position: absolute;
  top: 0;}

.flower .child .leaf {
  height: 100%;
  border-radius: 50%;
  visibility: hidden;
  transition: transform 3.2s ease-in-out;}

.flower .child:nth-child(1) {transform: rotate(-90deg)}
.flower .child:nth-child(1) .leaf {
  background: url(http://Url-imagemenu.png);
  background-size: 100%;
  opacity: 0.94;
  transition: transform 3.2s ease-in-out,
  box-shadow 0.16s ease-in-out,
  visibility 3.2s linear;}

.flower .child:nth-child(1) .leaf .glass-holder {
  height: 100%;
  transform: rotate(90deg);}

.flower .child:nth-child(2) {transform: rotate(-18deg);}
.flower .child:nth-child(2) .leaf {
  background: url(http://Url-imagemenu.png);
  background-size: 100%;
  opacity: 0.94;
  transition: transform 3.2s ease-in-out,
  box-shadow 0.16s ease-in-out,
  visibility 3.2s linear;}

.flower .child:nth-child(2) .leaf .glass-holder {
  height: 100%;
  transform: rotate(18deg);}

//add a few more menu here...
.flower .child:nth-child(3) {....}
.flower .child:nth-child(3) .leaf {....}
.flower .child:nth-child(3) .leaf .glass-holder {....}

.flower .child:nth-child(4) {....}
.flower .child:nth-child(4) .leaf {....}
.flower .child:nth-child(4) .leaf .glass-holder {....}

.flower .child:nth-child(5) {....}
.flower .child:nth-child(5) .leaf {....}
.flower .child:nth-child(5) .leaf .glass-holder {....}

.flower .glass {height:100%;transition:transform 3.2s ease-in-out}
.flower:hover .leaf .glass {transform: rotate(-2970deg);}
.flower:hover {transform: scale(3.4)}
.flower:hover .inner {transform: scale(0.294117647058824)}
.flower hover .leaf {
  visibility: visible;
  transform:rotate(720deg) translateX(144px) rotate(2250deg)}

Peletakan serta penyusunan kode CSS diatas sudah saya urutkan dengan sistem perintah hover. Menu akan tampil hanya jika link di "HOVER" dengan efek zoom-scale (skala membesar) dan menu akan kembali ketampilan semula saat hover dilepas dengan efek smaller-scale (skala mengecil). Tahap selanjutnya hanya tinggal memanggil kelas-kelas elemen CSS diatas dengan HTML berikut:

<div class="flower">
   <div class="inner">
      <div class="spinner">
         <div class="child">
           <a href="#" class="leaf">
     <div class="glass-holder">
        <div class="counterspin">
        </div>
     </div>
           </a>
         </div>

         <div class="child">
           <a href="#" class="leaf">
     <div class="glass-holder">
        <div class="counterspin">
        </div>
     </div>
           </a>
         </div>

//tambahkan untuk pengaturan menu berikutnya...
<div class="child"> <!..for menu 3..!>
<div class="child"> <!..for menu 4..!>
<div class="child"> <!..for menu 5..!>
      </div> <!..ending tag spinner..!>
        <div class="cover"></div>
   </div> <!..ending tag inner..!>
</div> <!..ending tag flower..!>