-webkit neyi dönüştürür: translate3d (0,0,0); tam olarak mı? Vücuda uygulansın mı?

-webkit-transform: translate3d(0,0,0); tam olarak ne yapıyor ? Herhangi bir performans sorunu var mı? Bunu sadece vücuda mı yoksa tek tek unsurlara mı uygulamalıyım? Kaydırma olaylarını büyük ölçüde iyileştiriyor gibi görünüyor.

Ders için teşekkürler!

-webkit-transform: translate3d(0,0,0); bazı cihazların donanım ivmesini çalıştırmasını sağlar.

İyi bir okuma bulunursa Burada

Yerel uygulamalar, piksellerin uçmasını sağlamak için cihazın grafik işlem birimine (GPU) erişebilir. Öte yandan, web uygulamaları tarayıcı bağlamında çalışır, bu da yazılımın oluşturmanın çoğunu (hepsini olmasa da) yapmasını sağlar ve bu da geçişler için daha az beygir gücü sağlar. Ancak Web yetişiyor ve çoğu tarayıcı satıcısı artık belirli CSS kuralları aracılığıyla grafiksel donanım hızlandırması sağlıyor.

Kullanımı -webkit-transform: translate3d(0,0,0);, GPU'yu CSS geçişleri için harekete geçirerek daha yumuşak hale getirir (daha yüksek FPS).

Not: translate3d(0,0,0) Gördükleriniz açısından hiçbir şey yapmaz. nesneyi x, y ve z eksenlerinde 0px hareket ettirir. Sadece donanım ivmesini zorlamak için bir tekniktir.

Bir alternatif -webkit-transform: translateZ(0). Ve dönüşümler nedeniyle Chrome ve Safari'de titreme varsa, -webkit-backface-visibility: hiddenve deneyin -webkit-perspective: 1000. Daha fazla bilgi için bu makaleye bakın .

Burada bunu açıklayan bir cevap görmedim. Her biri divve seçeneklerinin karmaşık bir doğrulama seti kullanılarak hesaplanmasıyla birçok dönüşüm yapılabilir . Ancak, bir 3B işlevi kullanırsanız, sahip olduğunuz 2B öğelerin her biri 3B öğeler olarak kabul edilir ve bu öğeler üzerinde anında bir matris dönüşümü gerçekleştirebiliriz . Ancak, öğelerin çoğu "teknik olarak" zaten donanım hızlandırılmış durumdadır çünkü hepsi GPU'yu kullanır. Ancak, 3B dönüştürmeler doğrudan bu 2B işlemelerin (veya önbelleğe alınmış sürümlerinin) her birinin önbelleğe alınmış sürümlerinde çalışır divve üzerlerinde doğrudan bir matris dönüşümü kullanır (bunlar vektörleştirilmiş ve paralelleştirilmiş FP matematiğidir).

3B dönüştürmelerin YALNIZCA önbelleğe alınmış bir 2B div üzerindeki özelliklerde değişiklik yaptığına dikkat etmek önemlidir (başka bir deyişle, div zaten oluşturulmuş bir görüntüdür). Bu nedenle, sınır genişliğini ve rengini değiştirmek gibi şeyler artık belirsiz bir şekilde konuşmak için "3B" değildir. Düşünürseniz, kenarlık genişliklerini değiştirmek, divnedeni yeniden oluşturmanızı ve 3B dönüştürmelerin uygulanabilmesi için yeniden önbelleğe almanızı gerektirir .

Umarım bu mantıklıdır ve başka sorunuz olursa bize bildirin.

Sorunuza cevap vermek için translate3d: 0x 0y 0zhiçbir şey yapmazsınız, çünkü dönüşümler doğrudan divGPU gölgelendiricisinin köşelerini çalıştırarak oluşturulan doku üzerinde çalışır . Bu gölgelendirici kaynağı artık önbelleğe alındı ​​ve çerçeve arabelleğine çizim yapılırken bir matris uygulanacak. Yani, temelde bunu yapmanın bir faydası yok.

Tarayıcının dahili olarak çalışması budur.

Adım 1: Girişi Ayrıştırma

<div style = "position:absolute;left:0;right:0;bottom:0;top:0;"></div>

Adım 2: Kompozit Katman Geliştirin

CompositeLayer compLayer = new CompositeLayer();
compLayer.setPosition(0, 0, 0, 0);
compLayer.setPositioning(ABSOLUTE); // Note. this is psuedocode. The actual code
Pipeline.add(compLayer, zIndex); // would be significantly more complex.

3. Adım: Kompozit Katmanı Oluşturun

for (CompositeLayer compLayer : allCompositeLayers){

     // Create and set cacheTexture as active target
     Texture2D cacheTexture = new Texture2D();
     cacheTexture.setActive();

     // Draw to cachedTexture
     Pipeline.renderVertices(compLayer.getVertices());
     Pipeline.setTexture(compLayer.getBackground());
     Pipeline.drawIndexed(compLayer.getVertexCount());

     // Set the framebuffer as active target
     frameBuffer.setActive();

     // Render to framebuffer from texture and **applying transformMatrix**
     Pipeline.renderFromCache(cacheTexture, transformMatrix);
}

MobileSafary'de (iOS 5) kaydırmada bir hata var ve bu durum, kayan kapsayıcıda giriş öğelerinin kopyaları olarak yapay nesnelerin görünmesine neden oluyor.

Her alt öğe için translate3d kullanmak bu garip hatayı düzeltebilir. İşte benim için günü kurtaran bir CSS örneği.

.scrolling-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.scrolling-container .child-element {
    position: relative;
    -webkit-transform: translate3d(0,0,0);
}

Translate3D, donanım hızlandırmayı zorlar.CSS animasyonları, dönüşümler ve geçişler otomatik olarak GPU ile hızlandırılmaz ve bunun yerine tarayıcının daha yavaş yazılım oluşturma motorundan yürütülür. GPU'yu kullanmak için translate3d kullanıyoruz.

Şu anda, Chrome, FireFox, Safari, IE9 + ve Opera'nın en son sürümü gibi tarayıcıların tümü donanım hızlandırma ile birlikte gelir, yalnızca bir DOM öğesinin bundan yararlanacağına dair bir göstergeye sahip olduklarında kullanırlar.

Bir yaratır unutmayın yığın bağlamı o kadar, (artı ne başka cevaplar söyledi) yok öyle olmaması durumunda potansiyel olarak gördüklerinizi üzerinde etkisi, örneğin yapma şey bir bindirme üzerinde görünür.