3D rotating

Biraz önce paylaştığım 3D görünümlü küp şeklindeki dikey Css3 menü hakkında biraz bilgi vermiştim. Menü ikolarının çerçevesini biraz büyük olduğundan dolayı sidebar bölümüne sığmayabilir diye bir açıklama da yapmıştım. Bu konuya değinerek biraz ebatları kurcalayarak şimdiki menüyü hazırladım. Aslında bu 3D görünümlü Css3 yan menü örneği konusu benim için biraz bedava oldu 🙂 Aynı kodlardan ufak tefek değişiklikler yaparak yeni bir menü gibi gösterip paylaşıyorum sizlerle.

Gördüğünüz gibi Çok ufak değişiklikler yaparak bile çok farklı görüntülerde Css3 örnekler hazırlamak oldukça kolay. Bir önceki 3D görünümlü menü örneğini 150x150px lik boyutlarda hazırladığım için yazı eklemek pek mantıklı görünmüyordu. bu seferki Css3 menü örneğinde Css kodları tamamen aynı. Sadece butonların genişliğini 300px yüksekliğini de 60px olarak ayarlayıp sidebar bölümlerinde kullanılmaya uygun bir hale getirdim Css kodlardan genişliği 250px e kadar getirseniz dahi başlıklar kaybolmayacaktır. Eğer ekleyeceğiniz başlıklar uzun olursa Css kodlardan li.menuBox a ve li.menuBox p bölümünden 50px olan font büyüklüğünü küçültün. Sanırım bunlar dışında yapmanız gereken bir ayar olmayacaktır.

Bir önceki konuda resim kullanmadan Font Awesome ikonları yardımıyla menüye ikonlar eklediğimi söylemiştim. Yine aynı ikonları kullandım zaten. bu bölümde herhangi bir değişiklik yapmadım. Kendi kategorilerinize uygun ikonları buradan menüye ekleyebilirsiniz.

Download 3D görünümlü Css3 yatay menü örneği

Demo 3D görünümlü Css3 yatay menü örneği

Kullanım

Head etiketleri arasına eklemeniz gereken bölümler.

Font Awesome css adresi :

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

Css :

body {
background-color:#CCCCCC; 
}
ul.cerceve {
   width:300px;
   height:auto;
   margin: 1px auto;
}
li.menuBox {
   width:300px;
   height:60px;
   overflow:hidden;
   position:relative;
   display:block;
   float:left;
   margin:0.3%;  
   -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
     -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
}
li.menuBox .primaryBox {
   width:300px;
   height:60px;
   position:relative;
   display:block;
   -webkit-transform-origin: 50% 100%;
   -moz-transform-origin: 50% 100%;
   -ms-transform-origin: 50% 100%;
   -o-transform-origin: 50% 100%;
   transform-origin: 50% 100%;
   -webkit-transform: perspective(900px) rotateX(0deg);
   -moz-transform: perspective(900px) rotateX(0deg);
   -ms-transform: perspective(900px) rotateX(0deg);
   -o-transform: perspective(900px) rotateX(0deg);
   -transform: perspective(900px) rotateX(0deg);
   -webkit-transition:0.3s;
   -moz-transition:0.3s;
   -ms-transition:0.3s;
   -o-transition:0.3s;
   transition:0.3s; 
}
li.menuBox:hover .primaryBox {
    margin-top:-60px;
   -webkit-transform: perspective(900px) rotateX(90deg);
   -moz-transform: perspective(900px) rotateX(90deg);
   -ms-transform: perspective(900px) rotateX(90deg);
   -o-transform: perspective(900px) rotateX(90deg);
   -transform: perspective(900px) rotateX(90deg);
   -webkit-transition:0.3s;
   -moz-transition:0.3s;
   -ms-transition:0.3s;
   -o-transition:0.3s;
   transition:0.3s; 
}

li.menuBox  .secondaryBox {
   width:300px;
   height:60px;
   position:relative;
   display:block;   
   background-color:#999999;
    -webkit-transform-origin: 50% 0%;
   -moz-transform-origin: 50% 0%;
   -ms-transform-origin: 50% 0%;
   -o-transform-origin: 50% 0%;
   transform-origin: 50% 0%;
   -webkit-transform: perspective(900px) rotateX(-90deg);
   -moz-transform: perspective(900px) rotateX(-90deg);
   -ms-transform: perspective(900px) rotateX(-90deg);
   -o-transform: perspective(900px) rotateX(-90deg);
   transform: perspective(900px) rotateX(-90deg);
   -webkit-transition:0.3s;
   -moz-transition:0.3s;
   -ms-transition:0.3s;
   -o-transition:0.3s;
   transition:0.3s; 
}
li.menuBox:hover .secondaryBox {
   background-color:#fff;
   -webkit-transform: perspective(900px) rotateX(0deg);
   -moz-transform: perspective(900px) rotateX(0deg);
   -ms-transform: perspective(900px) rotateX(0deg);
   -o-transform: perspective(900px) rotateX(0deg);
   transform: perspective(900px) rotateX(0deg);
}
li.menuBox a{
   text-decoration:none;
   font-size:50px;
   margin-left:7px;
   margin-top:5px;
   display:block;
   float:left;
   position:absolute;
    color: rgba(0,0,0,0.6);
    text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}
li.menuBox p{
   text-decoration:none;
   font-size:50px;
   margin-left:50px;
   margin-top:-50px;
   display:block;
   position:absolute;
   float:right;
    color: rgba(0,0,0,0.6);
    text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}

Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<ul class="cerceve">
  <li class="menuBox">
    <div class="primaryBox"><a href="https://www.mintik.com/?p=14854"><i class="fa fa-android"><p>Android</p></i></a></div>
    <div class="secondaryBox"><a href="https://www.mintik.com/?p=14854"><i class="fa fa-android"><p>Android</p></i></a></div>  
  </li>
  <li class="menuBox">
    <div class="primaryBox"><a href="https://www.mintik.com/?p=14854"><i class="fa fa-apple"><p>Apple</p></i></a></div>
    <div class="secondaryBox"><a href="https://www.mintik.com/?p=14854"><i class="fa fa-apple"><p>Apple</p></i></a></div>  
  </li>
  <li class="menuBox">
    <div class="primaryBox"><a href="https://www.mintik.com/?p=14854"><i class="fa fa-windows"><p>Windows</p></i></a></div>
    <div class="secondaryBox"><a href="https://www.mintik.com/?p=14854"><i class="fa fa-windows"><p>Winows</p></i></a></div>  
  </li>
  <li class="menuBox">
    <div class="primaryBox"><a href="https://www.mintik.com/?p=14854"><i class="fa fa-linux"><p>Linux</p></i></a></div>
    <div class="secondaryBox"><a href="https://www.mintik.com/?p=14854"><i class="fa fa-linux"><p>Linux</p></i></a></div>  
  </li>
  <li class="menuBox">
    <div class="primaryBox"><a href="https://www.mintik.com/?p=14854"><i class="fa fa-youtube"><p>Youtube</p></i></a></div>
    <div class="secondaryBox"><a href="https://www.mintik.com/?p=14854"><i class="fa fa-youtube"><p>Youtube</p></i></a></div>  
  </li>
  <li class="menuBox">
    <div class="primaryBox"><a href="https://www.mintik.com/?p=14854"><i class="fa fa-skype"><p>Skype</p></i></a></div>
    <div class="secondaryBox"><a href="https://www.mintik.com/?p=14854"><i class="fa fa-skype"><p>Skype</p></i></a></div>  
  </li>
  <li class="menuBox">
    <div class="primaryBox"><a href="https://www.mintik.com/?p=14854"><i class="fa fa-github"><p>Github</p></i></a></div>
    <div class="secondaryBox"><a href="https://www.mintik.com/?p=14854"><i class="fa fa-github"><p>Github</p></i></a></div>  
  </li>
  <li class="menuBox">
    <div class="primaryBox"><a href="https://www.mintik.com/?p=14854"><i class="fa fa-html5"><p>Html5</p></i></a></div>
    <div class="secondaryBox"><a href="https://www.mintik.com/?p=14854"><i class="fa fa-html5"><p>Html5</p></i></a></div>  
  </li>
  <li class="menuBox">
    <div class="primaryBox"><a href="https://www.mintik.com/?p=14854"><i class="fa fa-dropbox"><p>Dropbox</p></i></a></div>
    <div class="secondaryBox"><a href="https://www.mintik.com/?p=14854"><i class="fa fa-dropbox"><p>Dropbox</p></i></a></div>  
  </li>
</ul>