3D cube style rotating

0
572
views

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 :

 Css :

 

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

 

Html :

Aranan kelimeler:

  • android dönen menü

CEVAP VER

Please enter your comment!
Please enter your name here