web-dev-qa-db-ja.com

webkit変換translate3d後にcss z-indexが失われる

絶対に配置された2つのdiv要素が重複しています。どちらもcssを介してz-index値を設定しています。 translate3d webkit変換を使用して、これらの要素を画面からアニメートし、画面に戻します。変換後、要素はz-index値のセットを尊重しなくなります。

Webkit変換を行った後、div要素のz-index/stack-orderに何が起こるかを説明できますか？そして、div要素のスタック順序を維持するために私ができることを説明しますか？

ここに、私がどのように変換を行っているかについての詳細情報があります。

変換の前に、各要素はcssを介して設定されたこれら2つのWebkit遷移値を取得します（jQueryを使用して.css()関数呼び出しを実行しています：

element.css({ '-webkit-transition-duration': duration + 's' });
element.css({ '-webkit-transition-property': '-webkit-transform' });

次に、translate3d -webkit-transformを使用して要素をアニメーション化します。

element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, -1px)' });

ところで、私はtranslate3dの3番目のパラメーターをいくつかの異なる値に設定して、3D空間でスタック順序を複製しようとしましたが、うまくいきませんでした。

また、iPhone/iPadおよびAndroidブラウザーは、このコードを実行する必要があるターゲットブラウザーです。どちらもWebkitの移行をサポートしています。

csswebkittransform
95
Rafe

これは以下に関連している可能性があります： https://bugs.webkit.org/show_bug.cgi?id=61824

基本的に、z軸に3D変換を適用すると、zインデックスはそれ以上考慮されなくなります（現在は3次元のレンダリングプレーンにあり、異なるz値を使用しています）。子要素の2Dレンダリングに戻す場合は、transform-style: flat;を使用します。

49
samy-delux

これは、間違いなくsamy-deluxが指摘したバグに関連しています。これは、絶対または相対として配置されている要素にのみ影響します。問題を解決するには、次のcssステートメントを、このように配置され、問題を引き起こしているすべての要素に適用できます。

-webkit-transform: translate3d(0,0,0);

これにより、実際に変換を実行せずに要素に変換が適用されますが、レンダリング順序に影響するため、問題の原因となる要素の上になります。

43
divThis

これに少し遅れましたが、Zインデックスを失った要素を次のように配置してみてください。最近いくつかの視差を行うときに問題が発生し、これが大いに役立ちました。

transform-style: preserve-3d;

これはパッティングを節約します

transform: translate3d(0,0,0);

GPUにより多くの負担をかける他の要素

12
RustyCollins

例を見るのを待っています

変換scale（1）を実行しようとしましたか？同様の問題があったことを思い出し、要素のhtml順序を再配置し、変換の使用のz-indexが変更されたという理由だけで必要のない変換を使用する必要がありました。

私がエラーになっていない場合、トランスフォームを使用するたびに、利用可能な最高のZ-indexになり、htmlの最も近い要素がタグの先頭に配置されます。だから下まで。

これが役立つことを願っています

7
Littlemad

z-indexは、-webkit-transform: translateZ(0px);でスタッカブル要素をスタイルする場合、3D変換されたdivに対して機能します

Codepenのスニペット-> http://codepen.io/mrmoje/pen/yLIul

この例では、ボタンstack upおよびstack downは、回転した要素（この場合はimg）に対してフッターのz-index（+/- 1）を上下します。

5
moje

ここで説明する問題を再現できませんでした。私が何をしようと、z-indexの値はすべての変換を通して保持されます。 Chromium（Google Chrome）を使用してテストしています。

Translate3d関数の3番目の引数は、要素のz軸を操作します。概念は、z-indexに似ていますが、正確に同じではありません... z軸が小さい要素は、値が大きい要素の下にあります。

意図したz-indexと一致するように3番目の引数の値を試してみましたが、問題は、CSS3アニメーション中にz軸が変化しないように見えることです。次の例では、ホバーされた要素が一番上にありますが、＃element_aは一番上にあります。

通常のセレクターと：hoverセレクターの両方にz-indexを追加すると、うまくいき、ホバーされた要素が最上位になります。

探しているものではありませんが、この動作は解決策を提供します。 translate3dとz-indexを使用して、初期レンダリングの順序を設定するだけです。

<style>
    div {
        width: 300px;
        height: 150px;
        background-color: white;
        border: 5px outset gray;
        float: left;
        margin: 20px;
        -webkit-transition: 2s;
    }

    #element_a {
        -webkit-transform: translate3d(0, 0, 50px);
    }
    #element_b {
        -webkit-transform: translate3d(0, 0, 100px);
    }

    #element_a:hover {
        -webkit-transform: translate3d(100px, 0, 60px);
    }

    #element_b:hover {
        -webkit-transform: translate3d(-100px, 0, -60px);
    }
</style>
<body>
    <div id="element_a">
        <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png">
    </div>
    <div id="element_b">
        <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png">
    </div>
</body>
3
user166560

これを回避する別の方法は、親要素を作成し、それに関連する他のすべての遷移を適用できることです。

# Apply transitions to a parent div
<div>
  # This image z-index -1 
  <img src="foo"/>

  # This image z-index -3
  <img src="bar"/>

  #This image z-index -2
  <img src="gg"/>
</div>

JsFiddle

0
Rust