html页面如何设置投影,html – css页面卷曲效果投影旋转

我正在尝试旋转我应用了“页面卷曲”投影的div.

页面卷曲阴影效果工作正常,直到我旋转div,此时阴影元素显示通过div(z-index问题)？

我也注意到,如果我有一个图像作为div内容,我不会遇到这个问题,但我很乐意让它适用于带有文本内容的div.有什么建议？

这是代码：

CSS(删除供应商前缀以缩短代码,但问题出现在所有现代浏览器中)：

.shadow {border:1px solid #ccc;position:relative;width:300px;height:116px;background-color:#ededed;}

.shadow:before, .shadow:after {

bottom:13px;

content: "";

position: absolute;

z-index: -1;

-moz-transform: rotate(-11deg);

box-shadow: 0 15px 5px rgba(0, 0, 0, 0.2);

height: 50px;

max-width: 50%;

width: 50%;

left:3px;

}

.shadow:after {

-moz-transform: rotate(11deg);

left: auto;

right: 2px;

}

.rotate{

-moz-transform: rotate(4deg);

}

HTML：

this is the first div

this is the second div