những gì hiện -webkit-biến đổi: translate3d (0,0,0); chính xác làm gì? Áp dụng cho cơ thể?

Question

chính xác những gì hiện -webkit-transform: translate3d(0,0,0);? Ứng dụng có bất kỳ vấn đề về hiệu suất nào không? Tôi chỉ nên áp dụng nó cho cơ thể hoặc các yếu tố cá nhân? Dường như cải thiện sự kiện cuộn đáng kể.

Cảm ơn bài học!

Answer 1

-webkit-transform: translate3d(0,0,0); làm cho một số thiết bị chạy tăng tốc phần cứng của chúng.

Một đọc tốt được tìm thấy Here

ứng dụng Native có thể truy cập của thiết bị đơn vị xử lý đồ họa (GPU) để làm cho pixel bay. Các ứng dụng web, mặt khác, chạy trong ngữ cảnh của trình duyệt, cho phép phần mềm làm nhiều nhất (nếu không phải là tất cả) của kết xuất, dẫn đến ít mã lực hơn cho quá trình chuyển đổi. Nhưng Web đã bắt kịp và hầu hết các nhà cung cấp trình duyệt hiện cung cấp tăng tốc phần cứng đồ họa bằng các quy tắc CSS cụ thể.

Sử dụng -webkit-transform: translate3d(0,0,0); sẽ đẩy GPU vào hành động cho quá trình chuyển đổi CSS, làm cho chúng mượt mà hơn (FPS cao hơn).

Lưu ý:translate3d(0,0,0) không có gì về những gì bạn thấy. nó di chuyển đối tượng bằng 0px theo trục x, y và z. Nó chỉ là một kỹ thuật để tăng tốc phần cứng.

---

Cách khác là -webkit-transform: translateZ(0). Và nếu có nhấp nháy trên Chrome và Safari do biến đổi, hãy thử -webkit-backface-visibility: hidden và -webkit-perspective: 1000. Để biết thêm thông tin, hãy tham khảo this article.

Answer 2

lực lượng Translate3D phần cứng tăng tốc CSS hình ảnh động, biến đổi và chuyển tiếp là không tự động GPU tăng tốc, và thay vào đó thực hiện từ phần mềm chậm hơn của trình duyệt render engine.In để sử dụng GPU chúng tôi sử dụng translate3d

Hiện nay, các trình duyệt như Chrome, FireFox, Safari, IE9 + và phiên bản Opera mới nhất đều có khả năng tăng tốc phần cứng, chúng chỉ sử dụng nó khi có chỉ báo rằng phần tử DOM sẽ được hưởng lợi từ nó.

Answer 3

Có lỗi khi cuộn trong MobileSafary (iOS 5) dẫn đến hiện vật xuất hiện dưới dạng bản sao của các yếu tố đầu vào trong vùng chứa cuộn.

Sử dụng dịch3d cho mỗi phần tử con có thể khắc phục lỗi lạ đó. Dưới đây là ví dụ về CSS đã lưu ngày cho tôi.

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

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

Answer 4

Tôi không thấy câu trả lời ở đây giải thích điều này. Rất nhiều phép biến đổi có thể được thực hiện bằng cách tính toán từng số div và các tùy chọn của nó bằng cách sử dụng một bộ xác nhận hợp lệ phức tạp. Tuy nhiên, nếu bạn sử dụng chức năng 3D, mỗi phần tử 2D bạn có được coi là các phần tử 3D và chúng tôi có thể thực hiện chuyển đổi ma trận trên các thành phần này khi đang di chuyển. Tuy nhiên, hầu hết các yếu tố này "đã được" kỹ thuật "đã tăng tốc phần cứng vì tất cả chúng đều sử dụng GPU.Tuy nhiên, các biến đổi 3D hoạt động trực tiếp trên các phiên bản được lưu trong bộ nhớ cache của mỗi trình diễn 2D (hoặc các phiên bản được lưu trong bộ nhớ cache của div) và trực tiếp sử dụng phép biến đổi ma trận trên chúng (được vector hóa và song song với toán FP).

Điều quan trọng cần lưu ý là chuyển đổi 3D CHỈ thực hiện thay đổi đối với các đối tượng địa lý trên div 2D được lưu trong bộ nhớ cache (nói cách khác, div đã là hình ảnh được hiển thị). Vì vậy, những thứ như thay đổi chiều rộng và màu của đường viền không còn "3D" để nói một cách mơ hồ nữa. Nếu bạn nghĩ về nó, việc thay đổi chiều rộng biên giới yêu cầu bạn phải trả lại div vì và recache nó để các biến đổi 3D có thể được áp dụng.

Hy vọng điều này có ý nghĩa và cho tôi biết nếu bạn có thêm bất kỳ câu hỏi nào.

Để trả lời câu hỏi của bạn, translate3d: 0x 0y 0z sẽ không làm gì vì các phép biến đổi hoạt động trực tiếp trên kết cấu được tạo thành bằng cách chạy các đỉnh của div vào trình đổ bóng GPU. Tài nguyên shader này được lưu trữ và một ma trận sẽ được áp dụng khi vẽ lên bộ đệm khung. Vì vậy, về cơ bản không có lợi ích từ việc đó.

Đây là cách trình duyệt hoạt động trong nội bộ.

Bước 1: Phân tích Input

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

Bước 2: Xây dựng composite lớp

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. 

Bước 3: Render composite lớp

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

Answer 5

Hãy lưu ý rằng nó tạo ra một stacking context (cộng với những câu trả lời khác đã nói), vì vậy nó không có khả năng ảnh hưởng đến những gì bạn thấy, ví dụ: làm cho một cái gì đó xuất hiện trên một lớp phủ khi nó không được yêu cầu.