-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ตัวเลือกและตัวเลือกโดยใช้ชุดการตรวจสอบที่ซับซ้อน อย่างไรก็ตามหากคุณใช้ฟังก์ชัน 3 มิติองค์ประกอบ 2 มิติแต่ละรายการที่คุณมีจะถือว่าเป็นองค์ประกอบ 3 มิติและเราสามารถทำการแปลงเมทริกซ์กับองค์ประกอบเหล่านี้ได้ทันที อย่างไรก็ตามองค์ประกอบส่วนใหญ่ "ในทางเทคนิค" ฮาร์ดแวร์เร่งแล้วเพราะทั้งหมดใช้ GPU แต่การแปลง 3D จะทำงานโดยตรงกับเวอร์ชันแคชของการเรนเดอร์ 2D แต่ละเวอร์ชันเหล่านี้ (หรือเวอร์ชันแคชของdiv) และใช้การแปลงเมทริกซ์โดยตรง (ซึ่งเป็นคณิตศาสตร์ FP แบบเวกเตอร์และแบบขนาน)

สิ่งสำคัญคือต้องทราบว่าการแปลง 3 มิติจะทำการเปลี่ยนแปลงเฉพาะคุณลักษณะบน div 2D ที่แคชไว้เท่านั้น (กล่าวอีกนัยหนึ่ง div นั้นเป็นรูปภาพที่แสดงผลแล้ว) ดังนั้นสิ่งต่างๆเช่นการเปลี่ยนความกว้างและสีของเส้นขอบจึงไม่ใช่ "3D" ที่พูดคลุมเครืออีกต่อไป หากคุณคิดเกี่ยวกับเรื่องนี้การเปลี่ยนความกว้างของเส้นขอบจะทำให้คุณต้องเรนเดอร์divเนื่องจากและกู้คืนเพื่อให้สามารถใช้การแปลง 3 มิติได้

หวังว่านี่จะสมเหตุสมผลและโปรดแจ้งให้เราทราบหากคุณมีคำถามเพิ่มเติม

เพื่อตอบคำถามของคุณคุณtranslate3d: 0x 0y 0zจะไม่ทำอะไรเลยเนื่องจากการแปลงจะทำงานโดยตรงบนพื้นผิวที่เกิดขึ้นจากการเรียกใช้จุดยอดของdivGPU shader ทรัพยากร shader นี้ถูกแคชและเมทริกซ์จะถูกนำไปใช้เมื่อวาดลงบนเฟรมบัฟเฟอร์ ดังนั้นโดยพื้นฐานแล้วไม่มีประโยชน์จากการทำเช่นนั้น

นี่คือวิธีการทำงานของเบราว์เซอร์ภายใน

ขั้นตอนที่ 1: แยกวิเคราะห์อินพุต

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

ขั้นตอนที่ 2: พัฒนา Composite Layer

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โดยอัตโนมัติเร่งและดำเนินการจากเอ็นจิ้นการแสดงผลซอฟต์แวร์ที่ช้ากว่าของเบราว์เซอร์แทนในการใช้ GPU เราใช้ translate3d

ปัจจุบันเบราว์เซอร์เช่น Chrome, FireFox, Safari, IE9 + และ Opera เวอร์ชันล่าสุดทั้งหมดมาพร้อมกับการเร่งฮาร์ดแวร์โดยจะใช้เฉพาะเมื่อมีข้อบ่งชี้ว่าองค์ประกอบ DOM จะได้รับประโยชน์จากมัน

โปรดทราบว่ามันสร้างบริบทที่ซ้อนกัน (บวกสิ่งที่คำตอบอื่น ๆ กล่าวว่า) ดังนั้นจึงไม่อาจมีผลกระทบต่อสิ่งที่คุณเห็นเช่นทำสิ่งที่ปรากฏขึ้นเหนือการซ้อนทับเมื่อมันไม่ควรจะ