我正在尝试旋转我应用了“页面卷曲”投影的div.
页面卷曲阴影效果工作正常,直到我旋转div,此时阴影元素显示通过div(z-index问题)？
我也注意到,如果我有一个图像作为div内容,我不会遇到这个问题,但我很乐意让它适用于带有文本内容的div.有什么建议？
这是代码：
CSS(删除供应商前缀以缩短代码,但问题出现在所有现代浏览器中)：
@H_301_14@.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.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：
@H_301_14@logos/2012/Teachers_Day_Alt-2012-hp.jpg" width="300" height="116">这是一个jsfiddle：
http://jsfiddle.net/U8qY3/5/最佳答案不错的工作！作为一种解决方法,您可以将DIV放在旋转的div中,背景颜色设置在一个下方,以及完整的高度和宽度,如下所示：http://jsfiddle.net/U8qY3/6/
HTML
@H_301_14@CSS
@H_301_14@.workaround{ height: 100%; width: 100%; background-color: #ededed; }
