apa -webkit-transform: translate3d (0,0,0); tepatnya lakukan? Terapkan ke tubuh?

apa -webkit-transform: translate3d(0,0,0); sebenarnya yang dilakukannya? Apakah ada masalah kinerja? Haruskah saya menerapkannya pada tubuh atau elemen individu? Tampaknya meningkatkan acara gulir secara drastis.

Terima kasih atas pelajarannya!

-webkit-transform: translate3d(0,0,0); membuat beberapa perangkat menjalankan akselerasi perangkat kerasnya.

Bacaan yang bagus ditemukan di sini

Aplikasi asli dapat mengakses unit pemrosesan grafis (GPU) perangkat untuk membuat piksel terbang. Aplikasi web, di sisi lain, berjalan dalam konteks browser, yang memungkinkan perangkat lunak melakukan sebagian besar (jika tidak semua) rendering, menghasilkan lebih sedikit tenaga kuda untuk transisi. Tetapi Web telah mengejar ketertinggalan, dan sebagian besar vendor browser sekarang menyediakan akselerasi hardware grafis melalui aturan CSS tertentu.

Menggunakan -webkit-transform: translate3d(0,0,0);akan menendang GPU untuk beraksi untuk transisi CSS, membuatnya lebih mulus (FPS lebih tinggi).

Catatan: translate3d(0,0,0) tidak melakukan apa pun dalam hal apa yang Anda lihat. itu memindahkan objek sebesar 0px dalam sumbu x, y dan z. Ini hanya teknik untuk memaksa akselerasi perangkat keras.

Alternatifnya adalah -webkit-transform: translateZ(0). Dan Jika ada kedipan di Chrome dan Safari karena perubahan, coba -webkit-backface-visibility: hiddendan -webkit-perspective: 1000. Untuk info lebih lanjut lihat artikel ini .

Saya tidak melihat jawaban di sini yang menjelaskan hal ini. Banyak transformasi dapat dilakukan dengan menghitung masing-masing divdan opsinya menggunakan sekumpulan validasi yang rumit. Namun, jika Anda menggunakan fungsi 3D, setiap elemen 2D yang Anda miliki dianggap sebagai elemen 3D dan kami dapat melakukan transformasi matriks pada elemen ini dengan cepat. Namun, sebagian besar elemen "secara teknis" sudah diakselerasi dengan perangkat keras karena semuanya menggunakan GPU. Tapi, transformasi 3D bekerja langsung pada versi cache dari setiap render 2D ini (atau versi cache dari div) dan langsung menggunakan transformasi matriks pada mereka (yang merupakan matematika FP yang di-vector dan diparalelkan).

Penting untuk diperhatikan bahwa transformasi 3D HANYA membuat perubahan pada fitur pada div 2D yang di-cache (dengan kata lain, div sudah berupa gambar yang dirender). Jadi, hal-hal seperti mengubah lebar dan warna bingkai tidak lagi "3D" menjadi samar-samar. Jika Anda memikirkannya, mengubah lebar batas mengharuskan Anda untuk divmerender karena dan menyimpannya kembali sehingga transformasi 3D dapat diterapkan.

Semoga ini masuk akal dan beri tahu saya jika Anda memiliki pertanyaan lain.

Untuk menjawab pertanyaan Anda, translate3d: 0x 0y 0ztidak akan melakukan apa-apa karena transformasi bekerja langsung pada tekstur yang dibentuk dengan menjalankan simpul divke shader GPU. Sumber daya shader ini sekarang di-cache dan matriks akan diterapkan saat menggambar ke buffer bingkai. Jadi, pada dasarnya tidak ada manfaatnya melakukan itu.

Beginilah cara kerja browser secara internal.

Langkah 1: Parse Input

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

Langkah 2: Kembangkan Lapisan Komposit

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.

Langkah 3: Render Composite Layer

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);
}

Ada bug dengan pengguliran di MobileSafary (iOS 5) yang menyebabkan munculnya artefak sebagai salinan elemen masukan dalam wadah pengguliran.

Menggunakan translate3d untuk setiap elemen turunan dapat memperbaiki bug aneh tersebut. Inilah contoh CSS yang menyelamatkan hari itu untuk saya.

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

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

Translate3D memaksa akselerasi perangkat keras. Animasi, transformasi, dan transisi CSS tidak secara otomatis diakselerasi oleh GPU , dan sebagai gantinya dijalankan dari mesin rendering perangkat lunak browser yang lebih lambat. Untuk menggunakan GPU, kami menggunakan translate3d

Saat ini, browser seperti Chrome, FireFox, Safari, IE9 +, dan versi terbaru Opera semuanya hadir dengan akselerasi perangkat keras, mereka hanya menggunakannya ketika ada indikasi bahwa elemen DOM akan mendapatkan keuntungan darinya.

Sadarilah bahwa ini menciptakan konteks yang bertumpuk (ditambah apa yang dikatakan jawaban lain), jadi ini berpotensi berpengaruh pada apa yang Anda lihat, misalnya membuat sesuatu muncul di atas hamparan ketika seharusnya tidak.