css page curl effect drop shadow with rotate - html

Question

I'm attempting to rotate a div to which I have applied a 'page curl' drop shadow.
The page curl drop shadow effect is working fine until I rotate the div, at which point the drop shadow elements show up through the div (z-index issue)?
I've also noticed that if I have an image as the div content, I don't get this issue, but I'd love to get it working for a div with text content. Any suggestions?
Here's the code:
CSS (vendor prefixes removed to shorten code, but the problem is occurring across all modern browsers):
.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 -->
And here's a jsfiddle:
http://jsfiddle.net/U8qY3/5/

Answer 1

Nice job!
As a workaround, you can put a DIV inside the rotated div, with background-colour set to underneath one, and full height and width, like this: 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;
}