Html css页面卷曲效果使用旋转放置阴影

我试图旋转一个应用了“页面卷曲”阴影的div

在我旋转div之前，页面卷曲阴影效果一直很好，此时阴影元素通过div显示（z-index问题）

我还注意到，如果我有一个图像作为div内容，我不明白这个问题，但我希望它能为一个包含文本内容的div工作。有什么建议吗

代码如下：

CSS（删除供应商前缀以缩短代码，但问题在所有现代浏览器中都存在）：

HTML:

这是第一个div
这是第二组

这里有一个JSFIDLE： 干得好

作为一种解决方法，您可以在旋转的DIV内放置一个DIV，背景色设置为“在下方”，并设置完整的高度和宽度，如下所示：

HTML

---

就这样！你们太快了。它也适用于其他现代浏览器。我不能相信这种巧妙的阴影效果。我在网上找到的。

.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);
}

    <div class="shadow">this is the first div</div> <!-- this one is ok -->
    <div class="shadow rotate">this is the second div</div> <!-- this has the issue -->
    <div class="shadow rotate"><img src="//www.google.com/logos/2012/Teachers_Day_Alt-2012-hp.jpg" width="300" height="116"></div> <!-- this one is ok -->

<div class="shadow rotate">
    <div class="workaround">this is the second div</div>         
</div>

.workaround{
    height: 100%;
    width: 100%;
    background-color: #ededed;
}