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

    
irst divlogos/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

CSS

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

原文地址：https://www.jb51.cc/html/425890.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。