11

W3 Web サイトで見られるように、この 3D 効果を再現しようとしています。ここに画像の説明を入力

コードをjsFiddleに入れましたが、ご覧のとおり、変換は適用されていますが、交差効果が適切にレンダリングされていません。Firefox でも動作しません。

これは Chrome の問題ですか、それともコードの問題ですか?

    <style>
.container {
    background-color: rgba(0, 0, 0, 0.3);
    transform-style: preserve-3d;
    perspective: 500px;
}
.container > div {
    position: absolute;
    left: 0;
}
.container > :first-child {
    transform: rotateY(45deg);
    background-color: orange;
    top: 10px;
    height: 135px;
}
.container > :last-child {
    transform: translateZ(40px);
    background-color: rgba(0, 0, 255, 0.75);
    top: 50px;
    height: 100px;
}
</style>

<div class="container">
    <div></div>
    <div></div>
</div>
4

1 に答える 1

2

これは、この 3D CSS がクリップではなくオーバーラップするのはなぜですか?の複製です。... その質問によると、それは webkit で報告されたバグです: https://bugzilla.mozilla.org/show_bug.cgi?id=689498 :

バグ 689498 - 交差する平面が適切に z オーダーされない

Alistair MacDonald 2012-04-12 12:22:25 PDT Safari および Mobile Safari では、この問題はなくなりました。問題は、Chrome と Firefox にまだ存在します。

破損: Firefox 14.0a1 (2012-04-12) -Win7 破損: Chrome 20.0.1096.1 -Win7 修正済み: Safari 5.1.5 (75.34.55.3) -Win7 修正済み: Mobile Safari (最終更新は 1 か月以上前) -iOs

テスト ケースとスクリーン グラブへのリンク: http://f1lt3r.com/code/3d-css-transforms-intersecting-planes-not-clipping/

于 2014-05-27T13:56:29.350 に答える