3D cube style rotating

3dsty

3dsty

Kaç gündür  sizlere Font Awesome ikonlarını kullanarak 3D  küp şeklinde  görünen bir Css3  yan menü örneği hazırlamak istiyordum. Ama her fırsatta diğer yazılarda da belirttiğim gibi  aklıma başka tür örnekler geldiği için bir türlü 3D küp şeklinde görünen Css3 menü örneğini sizlerle tanıştırma fırsatım olmadı 🙂 Aslında bugünde  başka bir örnek hazırlayacaktım ama o kadar Css3 örneğini paylaştıktan sonra daha fazla geçiştirmek pek doğru olmazdı.

Css3 3D görünümlü  küp şeklindeki  menü örneğini  sanırım abartılı olarak biraz büyük yaptım. Normalde websitelerinin sidebar bölümü genişliği en fazla 300px  olur. Daha  geniş olanları da var  ama çok çok az diyebileceğim bir miktar. Her bir küpün genişliğini 150px olarak ayarladım. Yani 300pxlik bir sidebara sahipseniz  tam olarak yan yana iki tane sığmayacaktır (sidebar padding değeri yüzünden).  Genişlik oranını ne yaparsam yapayım sonuçta birileri mutlaka kendi sitesine  uymadığı için boyutlarını değiştirecektir. O yüzden örneğin  daha iyi  incelenebilmesi için bu şekilde büyük hazırladım.

3D  küp şeklinde  görünen Css3 menü örneğinde görünen ikonları Font Awesome yardımıyla ekledim. Rastgele  markalaşmış ikonlar bölümünden seçtim bunları. Buradan Font Awesome ikonlarını inceleyip kendi sitenizin kategorilerine  uygun olan ikonları ekleyebilirsiniz. Yada kendi  tasarlamış olduğunuz  ikonları eklersiniz.

 

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; 
background-image: 
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;
}
ul.cerceve {
   width:500px;
   height:auto;
   margin: 0 auto;
}
li.contentBox {
   width:150px;
   height:150px;
   overflow:hidden;
   position:relative;
   display:block;
   float:left;
   margin:1%;  
   -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.contentBox .imgBox {
   width:150px;
   height:150px;
   background-color:#999999;
   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.contentBox:hover .imgBox {
    margin-top:-150px;
   -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.contentBox  .textBox {
   width:150px;
   height:150px;
   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.contentBox:hover .textBox {
   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.contentBox a{
   text-decoration:none;
   font-size:100px;
   margin-left:33px;
   margin-top:20px;
   display:block;
   position:absolute;
   color: #666;
   text-shadow: 2px 4px 5px #333;
}

 

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

 

Html :

<ul class="cerceve">
  <li class="contentBox">
    <div class="imgBox"><a href="http://mintik.com/?p=14846"><i class="fa fa-android"></i></a></div>
    <div class="textBox"><a href="http://mintik.com/?p=14846"><i class="fa fa-android"></i></a></i></div>  
  </li>
  <li class="contentBox">
    <div class="imgBox"><a href="http://mintik.com/?p=14846"><i class="fa fa-apple"></i></a></div>
    <div class="textBox"><a href="http://mintik.com/?p=14846"><i class="fa fa-apple"></i></a></div>  
  </li>
  <li class="contentBox">
    <div class="imgBox"><a href="http://mintik.com/?p=14846"><i class="fa fa-windows"></i></a></div>
    <div class="textBox"><a href="http://mintik.com/?p=14846"><i class="fa fa-windows"></i></a></div>  
  </li>
  <li class="contentBox">
    <div class="imgBox"><a href="http://mintik.com/?p=14846"><i class="fa fa-linux"></i></a></div>
    <div class="textBox"><a href="http://mintik.com/?p=14846"><i class="fa fa-linux"></i></a></div>  
  </li>
  <li class="contentBox">
    <div class="imgBox"><a href="http://mintik.com/?p=14846"><i class="fa fa-youtube"></i></a></div>
    <div class="textBox"><a href="http://mintik.com/?p=14846"><i class="fa fa-youtube"></i></a></div>  
  </li>
  <li class="contentBox">
    <div class="imgBox"><a href="http://mintik.com/?p=14846"><i class="fa fa-skype"></i></a></div>
    <div class="textBox"><a href="http://mintik.com/?p=14846"><i class="fa fa-skype"></i></a></div>  
  </li>
  <li class="contentBox">
    <div class="imgBox"><a href="http://mintik.com/?p=14846"><i class="fa fa-github"></i></a></div>
    <div class="textBox"><a href="http://mintik.com/?p=14846"><i class="fa fa-github"></i></a></div>  
  </li>
  <li class="contentBox">
    <div class="imgBox"><a href="http://mintik.com/?p=14846"><i class="fa fa-html5"></i></a></div>
    <div class="textBox"><a href="http://mintik.com/?p=14846"><i class="fa fa-html5"></i></a></div>  
  </li>
  <li class="contentBox">
    <div class="imgBox"><a href="http://mintik.com/?p=14846"><i class="fa fa-dropbox"></i></a></div>
    <div class="textBox"><a href="http://mintik.com/?p=14846"><i class="fa fa-dropbox"></i></a></div>  
  </li>
</ul>
0 Comments

Leave a Comment