CSS3+HTML5 3D縦型アコーディオンメニューアニメーション切り替え効果

コードスニペット：

<セクション>

<ul class="container anim-label-4 anim-art ">
<li><input type="radio" id="ac-1" name="ac-3D" checked="checked"/><label for="ac-1" onclick="" title= "Accordion とは">Accordion とは</label><article><p>Accordion は、複数のペインを提供し、一度に 1 つずつ表示できる Web コントロールです。これは、一度に 1 つだけを展開できる複数の CollapsiblePanel があるようなものです。</p></article></li>
<li><input type="radio" id="ac-2" name="ac-3D" /><label for="ac-2" onclick="" title="あなたのパネル"> ;あなたのパネル</label><article><p>真実は、痛み自体は非常に重要であり、痛みの後には利益が続きますが、それはいくつかの大きな仕事と痛みと同時に起こります。というのは、最も細かい点に至ると、そこから何らかの利益を得ない限り、いかなる種類の仕事も実践すべきではないからである。叱責の痛みに腹を立てないでください、彼が痛みから少しでもなりたい喜びの中で、彼を痛みから逃げさせてください。情欲に目がくらまなければ出てこない、義務を放棄して心を和らげる、つまり労働をするのは悪いのである。 <li><input type="radio" id="ac-3" name="ac-3D" /><label for="ac-3" onclick="" title="誰が作ったのかthis ? ">誰がこれを作成しましたか?</label><article><p>これは、3 番目のパネルを持つアコーディオンを作成する方法の例です。</p></article>< /ライト>
<li><input type="radio" id="ac-4" name="ac-3D" /><label for="ac-4" onclick="" title="概要" > 概要</label><article><p>このスクリプトは Roodper によって作成されました。 <a href="https://twitter.com/#!/roodper">Twitter</a> でいつでも私をフォローしていただけます。または <a href="https://www.facebook.com/Roodper">Facebook</a>.</p></article></li>