1

3D CSS トランスフォームを使用しているときに、2 つの要素のクリッピングを防ぐのに問題があります。誰かがこれに遭遇し、解決策を見つけましたか?

問題を説明するために、最新バージョンの iOS のスクリーンショットを添付しました。これはデスクトップ版の Safari でも発生しますが、OS X の Chrome では発生しません。

なぜこれが起こるのか、また状況によってはこれが正しい動作であることも理解していますが、異なるブラウザー間で一貫性がありません。

助けてくれてありがとう:)

例

4

1 に答える 1

2

これは、同じ 3D レイヤー内で両方の要素をレンダリングすることが原因です。解決策は、それらをそれぞれ独自のレイヤーでレンダリングすることです。

これは、問題の原因となったコードの簡略版です。

CSS:

.wrapper {
    transform-style: preserve-3d;
    perspective: 1000;
}

.rotate {
    width: 100px;
    height: 100px;
    background: grey;
    transform: rotateX(45deg);
}

.clipped-element {
    width: 30px;
    height: 30px;
    background: blue;
}

HTML:

<div class="wrapper">
    <div class="rotate">
        <div class="clipped-element"></div>
    </div>
</div>

を使用transform-styleしperspectiveて、レンダリング レイヤーを作成しました。はこのレイヤーの.clipped-element一部であるため、同じ 3D 空間に存在します。

クリップされた要素を独自のレイヤーに移動することで、独自の 3D 空間に存在し、クリッピングの問題が回避されます。

CSS:

.wrapper {
    width: 200px;
    height: 200px;
}

.rotate__wrapper {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    perspective: 1000;
}

.rotate {
    width: 100px;
    height: 100px;
    background: grey;
    transform: rotateX(45deg);
}

.clipped-element {
    width: 30px;
    height: 30px;
    background: blue;
}

HTML:

<div class="wrapper">
    <div class="rotate__wrapper">
        <div class="rotate"></div>
    </div>
    <div class="clipped-element"></div>
</div>

CodePen で例を作成しました。

于 2016-12-06T09:30:23.607 に答える