Menu Cantik Dengan CSS3 3D Accordion

Halo sob...

Pembahasan kali ini mengenai menu accordion, dimana menu accordion sendiri sekarang begitu populer karena penggunaannya yang sangat dibutuhkan untuk menampilkan banyak konten dalam sebuah area saja.

Kalau pada umumnya, menu accordion memberikan tampilan vertikal atau horizontal saja, maka bagaimana tampilan accordion 3D??? Menu accordion 3D ini sendiri dapat digunakan untuk menampilkan berbagai artikel yang merupakan artikel pilihan dan ditampilkan dalam bentuk 3D sehingga sangat menarik untuk dicoba...

Coba lihat DEMO dibawah, atau lihat demo disini.

Tertarik untuk menampilkannya???

1. Login dulu ke blogger.

 

2. Pilih Template - Edit HTML.

3. Letakkan kode CSS berikut diatas </style> atau ]]></b:skin> :

#accordion {
      margin: 100px;
   }
   #accordion article {
      -webkit-transform: perspective(900px) rotateY(60deg);
      -webkit-transition: all 0.7s ease-in-out;
      background: #fff;
      border: 1px solid #f3f3f3;
      box-shadow: 0px 5px 15px gray;
      float: left;
      height: 420px;
      margin-left: -180px;
      padding: 20px;
      width: 220px;
   }
   #accordion article:first-child {
      margin-left: 0px;
   }
   #accordion article img {
      float: left;
      padding: 0 10px 5px 0;
   }
   #accordion article:hover {
      -webkit-transform: perspective(0) rotateY(-10deg);
      margin: 0 140px 0 -60px;
   }

4. Simpan Template.

5. Letakkan kode HTML berikut di area dimana temen-temen ingin 3D Accordion ini ditampilkan :

<div id="accordion">
   <article>
      <h2>Section 1</h2>
      <img src="img/img1.jpg" alt="" width="100" height="88" /> 
      <p>
         ISI Section 1.
      </p>
   </article>
   <article>
      <h2>Section 2</h2>
      <img src="img/img2.jpg" alt="" width="100" height="75" /> 
      <p>
         ISI Section 2.
      </p>
   </article>
   <article>
      <h2>Section 3</h2>
      <img src="img/img3.jpg" alt="" width="100" height="67" /> 
      <p>
         ISI Section 3.
      </p>
   </article>
   <article>
      <h2>Section 4</h2>
      <img src="img/img4.jpg" alt="" width="100" height="75" /> 
      <p>
         ISI Section 4.
      </p>
   </article>
</div>

6. Enjoy.

Bagaimana sob???

Oiya, menu 3D accordion ini hanya dapat bekerja dengan baik pada browser Chrome dan Safari.

*Ganti kode hijau dengan judul artikel dan kode biru dengan isi artikel, serta kode oranye dengan gambar dari artikel tersebut.

Terima kasih...

Semoga bermanfaat...