что делает-webkit-transform: translate3d (0,0,0); точно делать? Применить к телу?

Я не видел здесь ответа, который объясняет это. Много преобразований может быть сделано путем вычисления каждого из div и его параметры с использованием сложного набора проверки. Однако, если вы используете 3D-функцию, каждый из 2D-элементов, которые у вас есть, рассматриваются как 3D-элементы, и мы можем выполнить матрица преобразования на этих элементах на лету. Однако большинство элементов "технически" уже аппаратно ускорены, потому что все они используют графический процессор. Но, 3D преобразования работают непосредственно на кэшированных версиях каждого из этих 2D-рендеров (или кэшированных версиях div) и непосредственно использовать матричное преобразование на них (которые векторизованы и распараллелены FP math).

важно отметить, что 3D преобразования только вносит изменения в объекты на кэшированном 2D div (другими словами, div уже является визуализированным изображением). Таким образом, такие вещи, как изменение ширины и цвета границы, больше не являются "3D", чтобы быть неопределенно говоря. Если вы думаете об этом, изменение ширины границы требует, чтобы вы повторно передали div потому что и переписать его так, что 3D преобразования могут быть применены.

надеюсь, что это имеет смысл и дайте мне знать, если у вас есть какие-либо вопросы.

чтобы ответить на ваш вопрос,translate3d: 0x 0y 0z ничего не будет делать, так как преобразования работают непосредственно на текстуре, которая формируется путем запуска вершин div в шейдер GPU. Этот ресурс шейдера теперь кэшируется и матрица будет применена при рисовании буфер кадров. Таким образом, в основном нет никакой пользы от этого.

это то, как браузер работает внутри.

Шаг 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 forces аппаратное ускорение.CSS анимации, преобразования и переходы не являются автоматически GPU ускоряется, а вместо этого выполняется из более медленного программного рендеринга браузера engine.In для использования GPU мы используем translate3d

в настоящее время браузеры, такие как Chrome, FireFox, Safari, IE9+ и последняя версия Opera, поставляются с аппаратным ускорением, они используют его только тогда, когда у них есть указание на то, что элемент DOM будет полезен от него.

имейте в виду, что он создает укладка контексте (плюс то, что другие ответы уже сказал), так что тут потенциально влияют на то, что вы видите, например, заставляя что-то появляться над наложением, Когда это не предполагается.