css sayfası kıvrılma efekti gölge döndürme ile döndürme

Question

'Sayfa kıvrımı' alt gölge uygulayacağım bir div döndürmeyi deniyorum.

Sayfa curl alt gölge efekti, div öğesini döndürene kadar iyi çalışıyor, bu noktada alt gölge öğeleri div (z dizini sorunu) üzerinden gösteriliyor?

Ayrıca, div içeriği olarak bir görüntüüm varsa, bu sorunu anlamıyorum, ancak metin içeriği olan bir div için çalışmayı çok isterim. Baska öneri? İşte

kod:

CSS (kod kısaltmak için kaldırılmış satıcı önekleri, ancak sorun tüm modern tarayıcılarda gerçekleşiyor): burada

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

Ve:

.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 jsfiddle: http://jsfiddle.net/U8qY3/5/

Answer 1

İyi iş! Geçici bir çözüm olarak

, böyle, birinin altında ayarlı background-color ve tam yükseklik ve genişliğe sahip, döndürülmüş div içinde bir DIV koyabilirsiniz: 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; 
}