2

このJSFiddleでは、Chrome と Firefox で Back div が Front div の前にレンダリングされるのはなぜですか? Mobile Safari では、Front は Back の前にレンダリングされます。

HTML

    <div id='view'>
        <div id='front' class='transformed'>Front</div>
        <div id='back' class='transformed'>Back</div>
    </div>

そして、CSS

    div#view {
        -webkit-perspective: 100px;
        -moz-perspective: -100px;
    }

    div.transformed {
        position:absolute;
        width: 100px;
        height: 100px;
        left: 100px;
        top: 100px;
    }

    div#front {
        background-color: red;
        -webkit-transform: translateZ(20px);
        -moz-transform: translateZ(20px);
    }

    div#back {
        background-color: rgba(0, 0, 255, 0.5);
        -webkit-transform: translateZ(0px);
        -moz-transform: translateZ(0px);
    }

私の予想では、Front は正の Z 方向に 20px 変換され、Back は 0px 変換されているため、Front は Back の前にレンダリングする必要があります。

これはバグですか、それとも何か不足していますか?

4

1 に答える 1

3

これは間違いなくバグです。必要はありませんが、次を追加できます。

    -webkit-transform-style: preserve-3d;

ビュー div に移動して、他のブラウザーをキックして正しいことを実行します。preserve-3d なしでパースペクティブを使用すると、それらが混乱し、z 順ではなくドキュメント順でレンダリングされる可能性があります。

jsfiddle を参照してください: http://jsfiddle.net/VMbKk/4/

(html のフロント div とバック div の順序を逆にするだけで、これと同じ効果が得られることに注意してください。したがって、フロントはバックの後にレンダリングされます)

于 2012-11-19T03:59:28.183 に答える