css z-endeksi webkit dönüşümü translate3d sonrasında kayboldu

Çakışan kesinlikle konumlandırılmış iki div öğem var. Her ikisi de css aracılığıyla z-endeksi değerlerini ayarladı. translate3dBu öğeleri ekranın dışına ve ardından ekrana geri döndürmek için webkit dönüşümünü kullanıyorum . Dönüşümden sonra, öğeler artık ayar z-indexdeğerlerine saygı göstermez .

Bir webkit dönüşümü yaptıktan sonra, div öğelerinin z-endeksi / yığın sırasına ne olduğunu açıklayabilir mi? Ve div öğelerinin yığın sırasını korumak için ne yapabileceğimi açıklayın?

Dönüşümü nasıl yaptığıma dair biraz daha bilgi burada.

Dönüşümden önce, her eleman css aracılığıyla belirlenen bu iki webkit geçiş değerini alır ( .css()işlev çağrılarını yapmak için jQuery kullanıyorum :

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

Öğe daha sonra translate3d -webkit-transform kullanılarak canlandırılır:

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

Btw, 3 parametresini 3 translate3dboyutlu alanda yığın sırasını kopyalamaya çalışmak için birkaç farklı değere ayarlamayı denedim , ancak şanssız.

Ayrıca, iPhone / iPad ve Android tarayıcıları, bu kodun çalışması gereken hedef tarayıcımdır. Her ikisi de webkit geçişlerini destekler.

Bu şununla ilgili olabilir: https://bugs.webkit.org/show_bug.cgi?id=61824

Temel olarak, z eksenine bir 3B dönüşüm uyguladığınızda, artık z-endeksi hesaba katılamaz (artık 3 boyutlu bir oluşturma düzlemindesiniz, farklı z değerleri kullanın). Alt öğeler için 2B oluşturmaya geri dönmek istiyorsanız, kullanın transform-style: flat;.

Bu kesinlikle samy-delux tarafından belirtilen hatayla ilgilidir. Bu, yalnızca mutlak veya göreceli olarak konumlandırılan tüm öğeleri etkilemelidir. Sorunu çözmek için, bu şekilde konumlandırılan ve sorunlara neden olan her öğeye aşağıdaki css ifadesini uygulayabilirsiniz:

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

Bu, dönüşümü gerçekten bir dönüşüm yapmadan öğeye uygulayacaktır, ancak oluşturma sırasını etkileyerek soruna neden olan öğenin üzerinde olacaktır.

Buna biraz geç ama Z-endeksini kaybeden unsurları aşağıdakileri yerleştirmeye çalışın, son zamanlarda bazı paralaks işleri yaparken bir sorun yaşadım ve bu çok yardımcı oldu.

transform-style: preserve-3d;

Bu koyarak kurtarır

transform: translate3d(0,0,0);

GPU'yu daha fazla zorlayan diğer unsurlar hakkında

Örneği görmek için bekliyorum

Bir dönüşüm ölçeği (1) yapmayı denediniz mi? Benzer bir sorun yaşadığımı hatırlıyorum ve öğelerin html sırasını yeniden düzenlemem ve dönüşüm kullanımının z-indeksi değiştiği için buna ihtiyacım olmayan bir dönüşümü kullanmam gerekti.

Hata yapmazsam, bir dönüşümü her kullandığınızda, mevcut en yüksek z-endeksi olur ve etiketin başına en yakın html öğesi tarafından sıralanır. Yani yukarıdan aşağıya.

Umarım bu yardımcı olur

z-index istiflenebilir öğenin stilini ayarlarsanız, 3 boyutlu dönüştürülmüş div'lere karşı çalışacaktır. -webkit-transform: translateZ(0px);

Kod parçası üzerinde kod parçası -> http://codepen.io/mrmoje/pen/yLIul

Örnekte, düğmeler stack upve stack downalt bilginin z-endeksini (+/- 1) döndürülen öğeye (bu durumda bir img) karşı yükseltir ve alçaltır.

Burada anlattığınız sorunu yeniden oluşturamadım. Ne yaparsam yapayım, z-endeksi değeri tüm dönüşümler boyunca korunur. Chromium (Google Chrome) kullanarak test ediyorum.

Translate3d işlevinin üçüncü argümanı, öğenin z eksenini işler. Kavram z-endeksine benzer, ancak tam olarak aynı değildir ... Daha düşük z eksenine sahip elemanlar, daha yüksek değerli elemanların altındadır.

Üçüncü bağımsız değişkenin değerlerini amaçladığınız z-endeksiyle eşleşecek şekilde denediğinizi biliyorum, ancak sorun, z ekseninin CSS3 animasyonu sırasında değişmemiş görünmesidir. Aşağıdaki örnekte, fareyle üzerine gelinen öğe üstte olmalı, ancak #element_a üstte kalmalıdır.

Hem normal seçiciye hem de: hover seçiciye bir z-endeksi eklersem, işe yarıyor gibi görünüyor ve üzerine gelinen öğenin en üstte olmasına izin veriyor.

Tam olarak aradığınız şey olmasa da, bu davranış bir çözüm sağlar. İlk oluşturma sırasını ayarlamak için sadece translate3d ve z-index'i kullanmanız gerekir.

<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>

Bunu aşmanın başka bir yolu, bir ana öğe oluşturabilmeniz ve bununla ilgili diğer tüm geçişleri uygulayabilmenizdir:

# 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