що означає -webkit-transform: translate3d (0,0,0); точно робити? Нанести на тіло?

що -webkit-transform: translate3d(0,0,0); саме робить? Чи є у нього проблеми з продуктивністю? Чи слід просто застосовувати його до тіла або окремих елементів? Здається, це значно покращує події прокрутки.

Дякую за урок!

-webkit-transform: translate3d(0,0,0); змушує деякі пристрої запускати апаратне прискорення.

Добре читати знаходиться Тут

Власні програми можуть отримати доступ до графічного процесора пристрою (GPU), щоб змусити пікселі літати. З іншого боку, веб-програми працюють у контексті браузера, що дозволяє програмному забезпеченню робити більшість (якщо не все) рендерингу, що призводить до меншої потужності для переходів. Але Інтернет наздоганяє, і більшість постачальників браузерів зараз забезпечують графічне апаратне прискорення за допомогою певних правил CSS.

Використання -webkit-transform: translate3d(0,0,0);призведе GPU до дії для переходів CSS, роблячи їх більш плавними (вищий FPS).

Примітка: translate3d(0,0,0) нічого не робить з точки зору того, що ви бачите. він переміщує об'єкт на 0px по осях x, y та z. Це лише техніка, що змушує апаратне прискорення.

Альтернативою є -webkit-transform: translateZ(0). І якщо є мерехтять на Chrome і Safari з - за перетворення, спробуйте -webkit-backface-visibility: hiddenі -webkit-perspective: 1000. Для отримання додаткової інформації зверніться до цієї статті .

Я не побачив тут відповіді, яка б це пояснювала. Багато перетворень можна здійснити шляхом обчислення кожного з divта його варіантів, використовуючи складний набір перевірки. Однак, якщо ви використовуєте функцію 3D, кожен з 2D-елементів, які у вас є, розглядається як 3D-елементи, і ми можемо виконати матричне перетворення цих елементів на льоту. Однак більшість елементів "технічно" вже апаратно прискорені, оскільки всі вони використовують графічний процесор. Але 3D-перетворення працюють безпосередньо над кешованими версіями кожного з цих 2D-рендерів (або кешованими версіями div) і безпосередньо використовують матричне перетворення на них (які векторизуються та паралелізують FP-математику).

Важливо зазначити, що ТРИХ перетворення ТІЛЬКИ вносять зміни до об’єктів у кешованому 2D-div (іншими словами, div - це вже відтворене зображення). Отже, такі речі, як зміна ширини межі та кольору, перестали бути «3D», якщо говорити невиразно. Якщо ви задумаєтеся, зміна ширини меж вимагає повторного відображення, divтому що, і повторного кешу, щоб можна було застосувати 3D-перетворення.

Сподіваюся, це має сенс, і дайте мені знати, якщо у вас виникнуть запитання.

Щоб відповісти на ваше запитання, translate3d: 0x 0y 0zнічого не зробиш, оскільки перетворення працюють безпосередньо на текстурі, яка формується шляхом запуску вершин версії в divшейдер графічного процесора. Цей ресурс шейдера тепер кешований, і матриця буде застосована під час малювання в буфер кадру. Отже, в основному від цього вигоди немає.

Ось як браузер працює внутрішньо.

Крок 1: Розбір вводу

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

Крок 2: Розробка композиційного шару

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: Візуалізуйте композитний шар

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 (iOS 5) виникла помилка при прокрутці, яка призводить до появи артефактів як копій вхідних елементів у прокручуваному контейнері.

Використання translate3d для кожного дочірнього елемента може виправити цю дивну помилку. Ось приклад CSS, який врятував мені день.

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

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

Translate3D змушує апаратне прискорення. CSS-анімація, перетворення та переходи не прискорюються автоматично GPU , а замість цього виконуються з повільнішого механізму візуалізації програмного забезпечення браузера. Для використання графічного процесора ми використовуємо translate3d

В даний час такі браузери, як Chrome, FireFox, Safari, IE9 + та остання версія Opera, мають апаратне прискорення, вони використовують його лише тоді, коли мають вказівку на те, що елемент DOM виграє від цього.

Майте в виду , що він створює контекст стека (плюс те , що інші відповіді сказав), так що це потенційно впливає на те , що ви бачите, наприклад , роблячи що - то з'являється над накладку , коли він не повинен.