3D cube style rotating

3D

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>

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2020-08-11 tarihinde yayınlandı,Toplam 6066 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...