css trang hiệu ứng curl thả bóng với xoay

Question

Tôi đang cố gắng xoay một div mà tôi đã áp dụng một 'trang curl' thả bóng.

Hiệu ứng đổ bóng trang curl đang hoạt động tốt cho đến khi tôi xoay div, tại thời điểm đó các phần tử đổ bóng hiển thị thông qua div (vấn đề z-index)?

Tôi cũng nhận thấy rằng nếu tôi có hình ảnh làm nội dung div, tôi không gặp phải vấn đề này, nhưng tôi muốn làm cho nó hoạt động cho một div có nội dung văn bản. Bất kỳ đề xuất?

Dưới đây là các mã:

CSS (tiền tố nhà cung cấp loại bỏ để rút ngắn mã, nhưng vấn đề đang xảy ra trên tất cả các trình duyệt hiện đại):

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

Và đây là a jsfiddle: http://jsfiddle.net/U8qY3/5/

Answer 1

Công việc tốt!

Là một khắc phục, bạn có thể đặt một DIV bên trong div xoay, với background-color thiết lập để bên dưới một, và chiều cao đầy đủ và chiều rộng, như thế này: 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; 
}