5

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

4

1 に答える 1

4

良くやった！

回避策として、回転した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;
}
于 2012-10-26T10:18:00.880 に答える