CSS3 3Dを使った要素を紙のように折りたたむデモ


Paperfold CSS (Felix Niklas | MDN Demo Studio)

CSS3 3D transformを使って作られた、要素を紙のように折りたたむデモ「Paperfold CSS」が公開されています。 (英語)

画面左上の「Open」ボタンをクリックすると、アニメーションしながら開いたり閉じたりします。

その下の「Time (開閉度) 」「Height Limit (折りたたみ枚数) 」「3D Perspective (奥行き) 」の各パラメータをスライダーで調整できます。

また画面をマウスでドラッグすると視点を変更できます。