web-dev-qa-db-fra.com

qu'est-ce que -webkit-transform: translate3d (0,0,0); faire exactement? Appliquer sur le corps?

que fait exactement -webkit-transform: translate3d(0,0,0);? At-il des problèmes de performance? Devrais-je simplement l'appliquer au corps ou à des éléments individuels? Il semble améliorer considérablement les événements de défilement.

Merci pour la leçon!

htmlcsscss3webkit
79
WIWIWWIISpitFire

-webkit-transform: translate3d(0,0,0); permet à certains périphériques d'exécuter leur accélération matérielle.

Une bonne lecture est trouvée ici

Les applications natives peuvent accéder à l’unité de traitement graphique (GPU) de l’appareil pour faire voler les pixels. Les applications Web, quant à elles, fonctionnent dans le contexte du navigateur, ce qui permet au logiciel d’effectuer la plupart (sinon la totalité) du rendu, ce qui réduit la puissance des transitions. Mais le Web est en train de rattraper son retard et la plupart des éditeurs de navigateurs fournissent désormais une accélération matérielle graphique au moyen de règles CSS particulières.

L'utilisation de -webkit-transform: translate3d(0,0,0); lance le GPU en action pour les transitions CSS, ce qui les rend plus fluides (FPS plus élevé).

Remarque: translate3d(0,0,0) ne fait rien en termes de ce que vous voyez. il déplace l'objet de 0px sur les axes x, y et z. Ce n'est qu'une technique pour forcer l'accélération matérielle.

Une alternative est -webkit-transform: translateZ(0). Et s'il y a des scintillements sur Chrome et Safari en raison des transformations, essayez -webkit-backface-visibility: hidden et -webkit-perspective: 1000. Pour plus d'informations, reportez-vous à cet article .

103
Yotam Omer

Je n'ai pas vu de réponse ici qui explique cela. Beaucoup de transformations peuvent être effectuées en calculant chacun des div et ses options en utilisant un ensemble compliqué de validation. Cependant, si vous utilisez une fonction 3D, chacun de vos éléments 2D est considéré comme un élément 3D et nous pouvons effectuer une transformation de matrice sur ces éléments à la volée. Cependant, la plupart des éléments sont déjà "techniquement" accélérés matériellement car ils utilisent tous le GPU. Cependant, les transformations 3D fonctionnent directement sur les versions en cache de chacun de ces rendus 2D (ou des versions en cache du div) et utilisent directement une transformation matricielle sur celles-ci (qui sont vectorisées et parallélisées FP maths).

Il est important de noter que les transformations 3D modifient UNIQUEMENT les fonctionnalités des div 2D mises en cache (en d'autres termes, la div est déjà une image rendue). Ainsi, des choses comme changer la largeur et la couleur de la bordure ne sont plus "3D", pour parler vaguement. Si vous y réfléchissez, changer la largeur des bordures nécessite de restituer le div car et de le remettre en cache pour que les transformations 3D puissent être appliquées.

J'espère que cela a du sens et laissez-moi savoir si vous avez d'autres questions.

Pour répondre à votre question, translate3d: 0x 0y 0z ne ferait rien puisque les transformations travaillent directement sur la texture formée en exécutant les sommets du div dans le shader GPU. Cette ressource de shader est maintenant mise en cache et une matrice sera appliquée lors du dessin sur le tampon d'images. Donc, fondamentalement, cela ne présente aucun avantage.

Voici comment le navigateur fonctionne en interne.

Étape 1: Entrée d'analyse

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

Étape 2: Développer la couche composite

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.

Étape 3: Rendre le calque composite

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);
}
11
Mathew Kurian

Il y a un problème avec le défilement dans MobileSafary (iOS 5) qui conduit à l'apparition d'artefacts en tant que copies d'éléments d'entrée dans le conteneur de défilement.

Utiliser translate3d pour chaque élément enfant peut corriger ce bogue étrange. Voici un exemple de CSS qui m'a sauvé la journée.

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

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

Translate3D force accélération matérielle. Les animations, transformations et transitions CSS ne sont pas automatiquement GPU accélérées et s'exécutent plutôt à partir du rendu logiciel plus lent du navigateur. engine.Afin d'utiliser GPU, nous utilisons translate3d

Actuellement, les navigateurs tels que Chrome, FireFox, Safari, IE9 + et la dernière version de Opera sont tous livrés avec une accélération matérielle. Ils ne l’utilisent que s’ils ont l’indication qu’un élément DOM en bénéficierait.

5
Prasanna Aarthi

Sachez que cela crée un contexte d'empilement (plus ce que les autres réponses ont dit), donc fait potentiellement avoir un effet sur ce que vous voyez, par exemple faire apparaître quelque chose par-dessus une superposition alors que ce n'est pas censé le faire.

2
Jason Young