क्या करता है -webkit- परिवर्तन: Translate3d (0,0,0); ठीक है? शरीर पर लागू करें?

Question

-webkit-transform: translate3d(0,0,0); वास्तव में क्या करता है? क्या इसके कोई प्रदर्शन मुद्दे हैं? क्या मुझे इसे शरीर या व्यक्तिगत तत्वों पर लागू करना चाहिए? यह स्क्रॉल घटनाओं में काफी सुधार करता है।

सबक के लिए धन्यवाद!

Comments

क्या जवाब गायब हैं: यह वास्तव में x-, y- और z- अक्ष पर 0 पिक्सेल द्वारा तत्व का अनुवाद करता है। ;)

— इन्सर्टसर्नमेयर

यह विशेष रूप से बड़े फ़ॉन्ट-आकारों पर दिखाई देने वाले फ़ॉन्ट रेंडरिंग पर भी प्रभाव डालता है। अन्यथा चिकनी धार फिर से अलियास दिखाई देती है। ब्राउज़र या OS हो सकती है, 7. विंडोज पर क्रोम 33 में इस मनाया

— patrickj

@patrickj मैंने translate3d(0,0,0)विंडोज 7 पर क्रोम 33 (33.0.1750.117m) के साथ थोड़ा अलग व्यवहार नोटिस करना शुरू कर दिया है । इसने मेरे तत्वों में से एक को अदृश्य बना दिया है, इसलिए मैंने इसे हटा दिया।

— डेविड शेरेट 16

भविष्य के संदर्भ के लिए: will-changeयह html एलिमेंट को अपनी लेयर में भी अलग करेगा। developer.mozilla.org/en-US/docs/Web/CSS/will-change । हैक की will-changeजगह लेगा -webkit-transform:translate3d(0,0,0)।

— जेसन लिडॉन

* css चयनकर्ता के साथ इसका उपयोग न करें मेरे सभी लिंक निष्क्रिय हो गए :)

— stefan

Answer 1

-webkit-transform: translate3d(0,0,0); कुछ उपकरण उनके हार्डवेयर त्वरण को चलाते हैं।

एक अच्छा पढ़ा यहाँ पाया जाता है

मूल अनुप्रयोग पिक्सेल की उड़ान भरने के लिए डिवाइस की ग्राफिकल प्रोसेसिंग यूनिट (GPU) तक पहुंच सकते हैं। दूसरी ओर, वेब अनुप्रयोग, ब्राउज़र के संदर्भ में चलते हैं, जो सॉफ़्टवेयर को रेंडरिंग का सबसे (यदि सभी नहीं) करने देता है, जिसके परिणामस्वरूप संक्रमण के लिए कम हॉर्स पावर होता है। लेकिन वेब पकड़ रहा है, और अधिकांश ब्राउज़र विक्रेता अब विशेष सीएसएस नियमों के अनुसार ग्राफिकल हार्डवेयर त्वरण प्रदान करते हैं।

उपयोग -webkit-transform: translate3d(0,0,0);करने से सीएसएस बदलावों के लिए GPU को कार्रवाई में किक किया जाएगा, जिससे वे चिकनी (उच्च FPS) हो जाएंगे।

नोट: translate3d(0,0,0) आप जो भी देखते हैं उसके संदर्भ में कुछ भी नहीं करता है। यह x, y और z अक्ष में 0px से ऑब्जेक्ट को ले जाता है। यह केवल हार्डवेयर त्वरण के लिए बाध्य करने की तकनीक है।

---

एक विकल्प है -webkit-transform: translateZ(0)। और यदि रूपांतरण, कोशिश -webkit-backface-visibility: hiddenऔर के कारण क्रोम और सफारी पर टिमटिमा रहा है -webkit-perspective: 1000। अधिक जानकारी के लिए इस लेख को देखें ।

Comments

मुझे यकीन नहीं है कि कैश्ड बनावट पर मैट्रिक्स परिवर्तन लागू करने से वास्तव में लाभ में सुधार होगा। जब सामग्री को कैश्ड बनावट से फ़्रेमबफ़र में ले जाया जाता है, तो यह परिवर्तन जटिल ऑपरेशन के लिए प्रदर्शन को बढ़ावा देगा, लेकिन स्वच्छ रंग की घटनाओं के लिए कोई लाभ नहीं होगा। यह कोई नुकसान नहीं करेगा और न ही कोई फायदा होगा। अगर मैं ग़लत हूं तो मेरी गलती सुझाएं?

— मैथ्यू कुरियन

मुझे लगता है कि सामान्य पेंट्स को भी गति मिलेगी .. एक परत निर्माण मानदंड "3 डी या परिप्रेक्ष्य सीएसएस गुणों को बदलना" है।

— यॉटम ओमर

एक उदाहरण के लिए, बूटस्ट्रैप का हिंडोला इसका उपयोग कर रहा है, जबकि प्रदर्शित छवि को दाएं से बाएं घुमा रहा है।

— एथन

@YotamOmer h / त्वरक को जोड़ने के लिए क्या हम वैकल्पिक रूप से TranslZ (0) या scale3d (1,1,1) का उपयोग कर सकते हैं?

— एथन

@Ethan हाँ, के अनुसार इस दोनों काम करना चाहिए। मैं केवल 3 डी परिवर्तन के बारे में जानता था, लेकिन जाहिरा तौर पर translateZअधिकांश ब्राउज़रों में भी चाल चलेंगे।

— यॉटम उमर

Answer 2

मुझे यहाँ एक उत्तर नहीं मिला जो यह बताता है। divसत्यापन के एक जटिल सेट का उपयोग करके प्रत्येक और उसके विकल्पों की गणना करके बहुत सारे परिवर्तन किए जा सकते हैं । हालाँकि, यदि आप 3 डी फ़ंक्शन का उपयोग करते हैं, तो आपके द्वारा चुने गए 2 डी तत्वों में से प्रत्येक को 3 डी तत्व माना जाता है और हम मक्खी पर इन तत्वों पर मैट्रिक्स परिवर्तन कर सकते हैं। हालांकि, अधिकांश तत्व "तकनीकी रूप से" पहले से ही हार्डवेयर त्वरित हैं क्योंकि वे सभी GPU का उपयोग करते हैं। लेकिन, 3 डी ट्रांसफ़ॉर्म इन 2 डी रेंडरर्स (या कैश्ड वर्जन div) में से प्रत्येक के कैश्ड वर्जन पर सीधे काम करते हैं और सीधे उन पर मैट्रिक्स ट्रांसफॉर्मेशन का उपयोग करते हैं (जो कि वेक्टर गणित और समानांतर एफपी गणित हैं)।

यह ध्यान रखना महत्वपूर्ण है कि 3D रूपांतरित केवल एक कैश्ड 2D डिव पर सुविधाओं में परिवर्तन करता है (दूसरे शब्दों में, डिव पहले से ही एक प्रदान की गई छवि है)। इसलिए, सीमा की चौड़ाई और रंग बदलने जैसी चीजें अब अस्पष्ट रूप से बोलने के लिए "3 डी" नहीं हैं। यदि आप इसके बारे में सोचते हैं, तो सीमा की चौड़ाई को बदलने के लिए आपको इसकी divवजह से पुनर्मूल्यांकन करना होगा और इसे फिर से भरना होगा ताकि 3 डी ट्रांसफ़ॉर्म लागू किया जा सके।

उम्मीद है कि यह समझ में आता है और मुझे पता है अगर आप किसी भी अधिक प्रश्न हैं।

अपने quesetion का जवाब देने के लिए, translate3d: 0x 0y 0zकुछ भी नहीं करेगा क्योंकि ट्रांसफ़ॉर्म सीधे उस बनावट पर काम करता divहै जो GPU shader में कोने को चलाने से बनता है । इस shader संसाधन को अब कैश किया गया है और फ्रेम बफर पर ड्राइंग करते समय एक मैट्रिक्स लागू किया जाएगा। तो, मूल रूप से ऐसा करने से कोई लाभ नहीं है।

यह है कि ब्राउज़र आंतरिक रूप से कैसे काम करता है।

चरण 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);
}

Answer 3

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

Answer 4

Translate3D हार्डवेयर त्वरण को बल देता है। CSS एनिमेशन, ट्रांसफ़ॉर्म और ट्रांज़िशन स्वचालित रूप से GPU त्वरित नहीं होते हैं , और इसके बजाय ब्राउज़र के धीमे सॉफ़्टवेयर रेंडरिंग इंजन से निष्पादित होते हैं। GPU का उपयोग करने के लिए हम Translate3d का उपयोग करते हैं।

वर्तमान में, क्रोम जैसे ब्राउज़र, फ़ायरफ़ॉक्स, सफारी, IE9 + और ओपेरा के नवीनतम संस्करण सभी हार्डवेयर त्वरण के साथ आते हैं, वे इसका उपयोग केवल तब करते हैं जब उन्हें संकेत मिलता है कि एक DOM तत्व को इससे लाभ होगा।

Answer 5

जानते हैं कि यह एक बनाता है स्टैकिंग संदर्भ (प्लस क्या अन्य उत्तर कहा), तो यह है संभवतः आप जो देखते हैं पर एक प्रभाव है, बनाने के लिए कुछ जैसे एक उपरिशायी पर दिखाई देते हैं, जब यह माना जाता नहीं है।