SORU
29 Mart 2011, Salı


css z-index kayıp y dönüşüm sonra translate3d

Üst üste konumlandırılmış iki div unsurlar var. Hem z-index değerleri css ile başlayın. "Translate3d" y ekrandan bu unsurlar animasyon ve ekrana geri dönüşümü. ı kullanın Dönüşüm sonra, bu öğeler artık kendi kümesi z-Endeksi değerlerine saygı duyuyorum.

Herkes öğrenince z-index yığın sipariş div / unsurları ne olacağını açıklamak bir y onları dönüştürmek olabilir? Ve tutmak için ne yapabilirim açıklar yığın sipariş div unsurları?

Burada yapacağım hakkında biraz daha bilgi dönüşümü.

Dönüşüm önce, her öğe bu iki y geçiş değerleri css ile ayarlamak alır (jQuery yapmak için kullanıyorum ".() css" işlevini çağırır:

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

Eleman daha sonra translate3d-y-dönüşümü kullanarak animasyonlu

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

Btw, translate3d parametre 3 farklı değerleri için Sipariş yığın şans için 3 boyutlu uzayda, ama çoğaltmak için denemek ayarı denedim.

Ayrıca,/iPad ve Android tarayıcıları iPhone bu kodu çalıştırmak için gereken hedef benim tarayıcı. Her iki y geçişler desteği.

CEVAP
2 Mart 2012, Cuma


Bu en kesinlikle hata samy-delux işaret ettiği ile ilgilidir. Bu sadece mutlak ya da göreli olarak konumlandırılmış olan herhangi bir unsur etkiler. Soruna çare bulmak için, bu şekilde konumlandırılmış ve sorunlara neden olan her eleman için aşağıdaki css deyimi uygulayabilirsiniz:

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

Bu öğenin üstünde olduğu kadar aslında bir dönüşüm yapmadan öğesine dönüştürmek, ama render düzeni etkileyen bu soruna neden uygulanacaktır.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • paikimchung

    paikimchung

    12 Mayıs 2006
  • paulandstorm

    paulandstorm

    4 EYLÜL 2006
  • vgeller1

    vgeller1

    22 Kasım 2009