CSS页面翻页效果带旋转的阴影

Question

我正在尝试旋转一个应用了“页角翻起”投影的

元素。

当我旋转

元素时，“页角翻起”投影效果表现正常，但此时投影的元素会穿过

元素（z-index问题）？

我还注意到，如果

元素的内容是一张图片，则不会出现这个问题，但我很想让它适用于文本内容的

元素。有什么建议吗？

以下是代码：

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：

    <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 -->

这是一个 jsfiddle 链接： http://jsfiddle.net/U8qY3/5/

- caitriona

Answer 1

做得好！

作为一种解决方法，您可以在旋转的 DIV 中放置一个 DIV，并将其背景颜色设置为下面的颜色，并设置完整的高度和宽度，如下所示：http://jsfiddle.net/U8qY3/6/

HTML

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

CSS

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

- Andrea Ligios

---

你们真是太快了，而且它还可以在其他现代浏览器上运行。 - caitriona

PS：我对这个巧妙的投影效果毫无功劳。我是在互联网上找到的。 - caitriona