एक div के 3 डी मान अनुवाद प्राप्त करें?

Question

एक div इस इसे करने के लिए आवेदन किया है कहते हैं:

-webkit-transform: translate3d(0px, -200px, 0px) 

मैं jQuery के साथ उन मूल्यों को कैसे पुनः प्राप्त कर सकता है?

Answer 1

मूल्य को matrix या matrix3d के रूप में संग्रहीत किया जाता है, इस पर निर्भर करता है कि z मान सेट किया गया था या नहीं। 2 डी मैट्रिक्स, एक्स और वाई के लिए कोई अन्य परिवर्तन नहीं मानते हैं, पिछले दो मान हैं। 3 डी मैट्रिक्स के लिए, एक्स, वाई, जेड, 1 अंतिम चार अंक हैं। आप इस के लिए स्वीकार किए जाते हैं जवाब के मैच() पद्धति को बदलते हैं

function getTransform(el) { 
    var results = $(el).css('-webkit-transform').match(/matrix(?:(3d)\(\d+(?:, \d+)*(?:, (\d+))(?:, (\d+))(?:, (\d+)), \d+\)|\(\d+(?:, \d+)*(?:, (\d+))(?:, (\d+))\))/) 

    if(!results) return [0, 0, 0]; 
    if(results[1] == '3d') return results.slice(2,5); 

    results.push(0); 
    return results.slice(5, 8); 
} 

Answer 2

संपादित करें: यह गलत है, इस पर ध्यान न दें।

मुझे लगता है कि अगर आप कुछ पसंद है ...

var styles = $('.myclass').css('-webkit-transform'); 

आप शायद translate3d(0px, -200px, 0px) वापस मिल जाएगा।

शायद तुम तो उस स्ट्रिंग पार्स सकता है? हालांकि एक हैक की तरह लगता है।

Answer 3

यह ऋणात्मक संख्याओं के लिए समर्थन जोड़ता है:

आप मूल्यों को प्राप्त करने के लिए रेगुलर एक्सप्रेशन का उपयोग कर सकता है आप अगर

$(el).css('-webkit-transform').match(/matrix(?:(3d)\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))(?:, (-{0,1}\d+)), -{0,1}\d+\)|\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))\))/) 

Answer 4

निम्नलिखित अभिव्यक्ति को अद्यतन करें, जब आपके ट्रांसफॉर्म ने फ्लोट किया है तो उन अजीब मामलों के लिए समर्थन जोड़ता है:

/matrix(?:(3d)\(-{0,1}\d+\.?\d*(?:, -{0,1}\d+\.?\d*)*(?:, (-{0,1}\d+\.?\d*))(?:, (-{0,1}\d+\.?\d*))(?:, (-{0,1}\d+\.?\d*)), -{0,1}\d+\.?\d*\)|\(-{0,1}\d+\.?\d*(?:, -{0,1}\d+\.?\d*)*(?:, (-{0,1}\d+\.?\d*))(?:, (-{0,1}\d+\.?\d*))\))/