2

絶対配置、CSS 変換、および CSS トランジションに大きく依存する Web アプリを開発しています。

私のマークアップ:

<div class="wrapper">
    <div class="background" ></div>
    <div class="foreground" >
        <div class="image" ></div>
    </div>
</div>​

私のCSS

.wrapper{
    -webkit-perspective: 1600;
    -webkit-perspective-origin-y: 30%;
    height: 500px;
    width: 100%;
}

.background{
    position: absolute;
    background-size: 100% 100%;
    background-image: url("http://farm9.staticflickr.com/8321/8038059897_403c567211.jpg");
    background-color: transparent;
    position: absolute;
    width: 100%;
    height: 300px;
    bottom: 0;
    pointer-events: none;
    -webkit-transform:translate3d(0px,0px,0px);
}

.foreground{
    position: absolute;
    top: 5%;
    bottom: 5%;
    left: 5%;
    right: 5%;
    -webkit-transform: rotateY(25deg);
}

.foreground .image{
    background-image: url("http://farm7.staticflickr.com/6139/6198476123_754eaa1920_m.jpg");
    position: absolute;
    background-size: 100% 100%;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform:translate3d(0px,10px,0px);
}

http://jsfiddle.net/KjG3f/24/で実際に動作しているのを見ることができます

この例を Safari (デスクトップと iOS の両方) で見ると、前景の画像が背景によって切り取られていることがわかります。ただし、Chrome では正しく動作しているようです。

背景から translate3d() を削除すると、レンダリングが機能するように見えますが、アニメーションのために translate3d() が必要です。

助けてくれてありがとう。</p>

4

1 に答える 1

1

これは Chrome のバグだと思います。実際、これに関して 2 つの問題が未解決のままです (http://code.google.com/p/chromium/issues/detail?id=116710 とhttp://code.google. com/p/chromium/issues/detail?id=102673 )。Firefox も同じ動作を示します。

Safari の方法は理にかなっています...3D 空間で前景画像を回転させると、同じ平面上にあるため、その背後の画像を切り取る必要があります。前景要素または背景要素の translate3d Z 値を変更すると、それらが交差しない場所まで前方または後方に移動できます。

残念ながら、3D 変換のクロスブラウザー サポートはまだかなり弱いです。頑張ってください!

于 2012-10-04T01:30:35.550 に答える