qué hace -webkit-transform: translate3d (0,0,0); exactamente hacer? ¿Aplicar al cuerpo?


88

¿qué hace -webkit-transform: translate3d(0,0,0); exactamente? ¿Tiene problemas de rendimiento? ¿Debería aplicarlo al cuerpo o elementos individuales? Parece mejorar drásticamente los eventos de desplazamiento.

¡Gracias por la lección!


4
Qué faltan las respuestas: en realidad, traduce el elemento en 0 píxeles en los ejes x, y y z. ;)
insertusernamehere

También tiene un impacto en la representación de fuentes, especialmente visible en tamaños de fuente grandes. De lo contrario, los bordes suaves aparecen nuevamente con alias. Podría ser específico del navegador o del sistema operativo, se observó esto en Chrome 33 en Windows 7.
patrickj

1
@patrickj También comencé a notar un comportamiento ligeramente diferente translate3d(0,0,0)en Chrome 33 (33.0.1750.117m) en Windows 7. Hizo que uno de mis elementos fuera invisible, así que lo eliminé.
David Sherret

2
Para referencia futura: will-changetambién separará el elemento html en su propia capa. developer.mozilla.org/en-US/docs/Web/CSS/will-change . will-changereemplazará el -webkit-transform:translate3d(0,0,0)truco.
Jason Lydon

no lo use con el selector * css, todos mis enlaces quedaron inactivos :)
stefan

Respuestas:


111

-webkit-transform: translate3d(0,0,0); hace que algunos dispositivos ejecuten su aceleración de hardware.

Una buena lectura se encuentra aquí

Las aplicaciones nativas pueden acceder a la unidad de procesamiento gráfico (GPU) del dispositivo para hacer volar los píxeles. Las aplicaciones web, por otro lado, se ejecutan en el contexto del navegador, lo que permite que el software realice la mayor parte (si no todo) del renderizado, lo que resulta en menos potencia para las transiciones. Pero la Web se ha puesto al día y la mayoría de los proveedores de navegadores ahora ofrecen aceleración de hardware gráfico mediante reglas CSS particulares.

El uso -webkit-transform: translate3d(0,0,0);hará que la GPU entre en acción para las transiciones CSS, haciéndolas más suaves (FPS más alto).

Nota: translate3d(0,0,0) no hace nada en términos de lo que ve. mueve el objeto en 0px en los ejes x, y y z. Es solo una técnica para forzar la aceleración del hardware.


Una alternativa es -webkit-transform: translateZ(0). Y si hay parpadeo en Chrome y Safari debido a las transformaciones, intente -webkit-backface-visibility: hiddeny -webkit-perspective: 1000. Para obtener más información, consulte este artículo .


No estoy seguro de si la aplicación de una transformación de matriz en la textura almacenada en caché realmente mejoraría el beneficio. Cuando el contenido se mueve de la textura en caché al framebuffer, la transformación aumentaría el rendimiento para operaciones complejas, pero no beneficiaría a los eventos de pintura normales. No hará ningún daño ni tendrá ningún beneficio. ¿Corrígeme si estoy equivocado?
Mathew Kurian

Creo que incluso las pinturas normales se acelerarán ... uno de los criterios de creación de capas es "propiedades CSS de transformación 3D o perspectiva".
Yotam Omer

Por ejemplo, el carrusel de bootstrap está usando esto, mientras mueve la imagen mostrada de derecha a izquierda.
Ethan

@YotamOmer ¿Podemos alternativamente utilizar translateZ (0) o scale3d (1,1,1) para activar el acelerador de h / w?
Ethan

1
@Ethan Sí, de acuerdo con esto ambos deberían funcionar. Solo sabía sobre la transformación 3D, pero aparentemente translateZtambién funcionará en la mayoría de los navegadores.
Yotam Omer

12

No vi una respuesta aquí que explique esto. Se pueden realizar muchas transformaciones calculando cada una de las divopciones y sus opciones mediante un complicado conjunto de validaciones. Sin embargo, si usa una función 3D, cada uno de los elementos 2D que tiene se consideran elementos 3D y podemos realizar una transformación matricial en estos elementos sobre la marcha. Sin embargo, la mayoría de los elementos ya están "técnicamente" acelerados por hardware porque todos usan la GPU. Pero, las transformaciones 3D funcionan directamente en las versiones en caché de cada uno de estos renderizados 2D (o versiones en caché de div) y utilizan directamente una transformación de matriz en ellos (que son matemáticas FP vectorizadas y paralelizadas).

Es importante tener en cuenta que las transformaciones 3D SOLO realizan cambios en las características de un div 2D almacenado en caché (en otras palabras, el div ya es una imagen renderizada). Entonces, cosas como cambiar el ancho y el color del borde ya no son "3D" para ser vagamente hablando. Si lo piensa, cambiar los anchos de los bordes requiere que divvuelva a procesar el porque y lo vuelva a guardar para que se puedan aplicar las transformaciones 3D.

Espero que esto tenga sentido y avíseme si tiene más preguntas.

Para responder a su pregunta, translate3d: 0x 0y 0zno haría nada, ya que las transformaciones funcionan directamente sobre la textura que se forma al ejecutar los vértices del divsombreador de GPU. Este recurso de sombreado ahora se almacena en caché y se aplicará una matriz al dibujar en el búfer de fotogramas. Entonces, básicamente no hay ningún beneficio al hacer eso.

Así es como funciona el navegador internamente.

Paso 1: Analizar la entrada

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

Paso 2: Desarrollar la capa compuesta

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.

Paso 3: renderizar la capa compuesta

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

6

Hay un error con el desplazamiento en MobileSafary (iOS 5) que provoca que aparezcan artefactos como copias de elementos de entrada en el contenedor de desplazamiento.

El uso de translate3d para cada elemento hijo puede corregir ese extraño error. Aquí hay un ejemplo de CSS que me salvó el día.

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

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

5

Translate3D fuerza la aceleración del hardware. Las animaciones, transformaciones y transiciones de CSS no se aceleran automáticamente por GPU , sino que se ejecutan desde el motor de renderizado de software más lento del navegador. Para usar GPU usamos translate3d

Actualmente, los navegadores como Chrome, FireFox, Safari, IE9 + y la última versión de Opera vienen con aceleración de hardware, solo lo usan cuando tienen una indicación de que un elemento DOM se beneficiaría de él.


3

Tenga en cuenta que crea un contexto de apilamiento (más lo que dijeron las otras respuestas), por lo que potencialmente tiene un efecto en lo que ve, por ejemplo, hacer que algo aparezca sobre una superposición cuando no se supone que debe hacerlo.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.