Make 3D Accordion Using CSS

Salah satu tema artikel yang masih banyak dipostingkan orang adalah mengenai tutorial accordion Mulai dari yg sederhana sampai dengan tingkat full stylish style! AA Koben sekarang akan berbagi satu cara bagaimana cara membuat 3D accordion. You can look final result here codepen.io/Vampireos/full/DAfdr. Karena ini full-stylish banget, maka penggunaan kode CSS agak lumayan ;)) Selain efek 3D, bagian terakhir kotak konten pada accordion ini menggunakan trik stack of cards. Apakah itu, you can read here what is that codepen.io/Adevade/pen/ogyreb.
You lucky, i want make a screenshot...Sobat bisa melihat bagian berputar, dan efek kotak bagian bawah terlihat seperti konten bertumpuk!

Mengapa menggunakan accordion?

Coba pikirkan tentang accordion sebagai alat manajemen konten. Bila sobat memiliki halaman yang dipecah menjadi puluhan paragraf, link, gambar, atau banyak blok konten ... salah satu solusinya yaitu memasang accordion :)

Kode CSS

Pasangkan kode CSS pada tempat semestinya. Editlah code sesuai dengan keperluan (warna, background, lebar, tinggi dll)

<ul class="container anim-label-4 anim-art">

<li>
<input checked="checked" id="ac-1" name="ac-3D" type="radio"/><label for="ac-1" onclick="" title="Title Tampak Depan">Title Tampak Belakang</label>
                <article>
<p>----------- BLAH BLEH BLOH -----------</p>
</article>
            </li>

            <li>
<input id="ac-2" name="ac-3D" type="radio"/><label for="ac-2" onclick="" title="Title Tampak Belakang">Title Tampak Depan</label>
                <article>
<p>----------- BLAH BLEH BLOH -----------</p>
</article>
            </li>

            <li>
<input id="ac-3" name="ac-3D" type="radio"/><label for="ac-3" onclick="" title="Title Tampak Belakang">Title Tampak Depan</label>
                <article>
<p>----------- BLAH BLEH BLOH -----------</p>
</article>
            </li>

            <li>
<input id="ac-4" name="ac-3D" type="radio"/><label for="ac-4" onclick="" title="Title Tampak Belakang">Title Tampak Depan</label>
                <article>
<p>----------- BLAH BLEH BLOH -----------</p>
                </article>
            </li>

            <li>
<input id="ac-5" name="ac-3D" type="radio"/><label for="ac-5" onclick="" title="Title Tampak Belakang">Title Tampak Depan</label>
                <article>
<p>----------- BLAH BLEH BLOH -----------</p>
                    <p>----------- BLAH BLEH BLOH -----------</p>
                    <p><iframe frameborder="0" height="315" src="//www.youtube.com/embed/k3L7pwrE-tw" width="100%"></iframe></p>
                </article>
            </li>

</ul>

Kalau sobat kepingin model lain, silahkan cari saja di Best Practices for Accordion Interfaces in Web Design webdesignledger.com/web-design-2/best-practices-accordions-in-web-design

Happy accordion \m/