CSS3でページをめくるような効果のあるボックス

Realistic CSS3 Box Shadowsより、CSS3でページをめくるような効果の紹介です。

マークアップは下記のようになります。

<div id="box">
       Text Here
</div>

CSSは下記のようになります。必ず背景色を付ける必要があります。なお、元記事では、webkitのみですが、下記ではFirefoxにも対応した記述にしています。

body{
	background-color: #ddd;
}

#box{
	width: 300px;
	height: 300px;
	margin: 50px auto;
	position: relative;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#fefbb0), to(#fff955));
	background: -moz-linear-gradient(top, #fefbb0 0%, #fff955 100%);
	-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
}

#box:after{
	-webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.7);
	-moz-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.7);
	position: absolute;
	content: '';
	background: transparent;
	bottom: 10px;
	right: 9px;
	width: 70%;
	height: 70%;
	-webkit-transform: rotate(5deg) skew(10deg);
	-moz-transform: rotate(5deg) skew(10deg);
	z-index: -2;
}

#box:before{
	-webkit-box-shadow: 11px 11px 32px rgba(255, 255, 255, 0.7);
	-moz-box-shadow: 11px 11px 32px rgba(255, 255, 255, 0.7);
	position: absolute;
	content: '';
	background: transparent;
	bottom: 46px;
	right: 41px;
	width: 50%;
	height: 50%;
	-webkit-transform: rotate(20deg) skew(45deg);
	-moz-transform: rotate(20deg) skew(45deg);
	z-index: -1;
}