我正在尝试旋转一个我应用的div,我应用了'page curl'落下阴影。
页面卷曲的落下阴影效果正常工作,直到我旋转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:
<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/
不错的工作!
作为解决方法,您可以在旋转的Div内放置一个DIV,背景色设置为一个下方,并将其全高和宽度设置为:http://jsfiddle.net.net/u8qy3/6/p
html
<div class="shadow rotate">
<div class="workaround">this is the second div</div>
</div>
CSS
.workaround{
height: 100%;
width: 100%;
background-color: #ededed;
}