去年イラレでクリスマス用のプレゼントボックスを描いたので、
じゃあ今年はCSSで描こうと思って実践してみたのがこれです。
CSS3 Xmas Gift Box – jsdo.it – share JavaScript, HTML5 and CSS
CSS3で立方体を表現するので有名なのはtransformによる3D Cubeですが
クォータービューより正面から見た立体の方が好きかな～と思ったので、台形で立体っぽくすべく
背景色と同じ色の:before、:after擬似要素を次のように被せて削ってます。
もっとごちゃごちゃとDivを使ったりJavaScriptを使ったりすればよりリアルな表現が出来そうだけど、
あんまりソースがスパゲッティになると美しくないので最低限必要なものだけにしといた。
アニメーションは当初フタが右方向に回転しながらパカッと開くのを想定してました。（ヘーベルハウスのﾊｰｲ!みたいな感じ）
これが実際やってみると擬似クラス要素にtransitionが効かないし、元々rotateしてある要素を改めて回転させるのが面倒だったので上方向にパカッとするので落ち着いた次第。