CSSのページカールの効果ドロップシャドウと回転

Question

私は 'ページカール'ドロップシャドウを適用した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, 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/

Answer 1

良くやった！回避策として

、あなたはこのように、下に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; 
}