ट्रांसफॉर्म पर CSS3 एनीमेशन: घूमना। घूर्णन तत्व के वर्तमान डिग्री लाने के लिए रास्ता?

Question

मैं एक एचटीएमएल 5 इंटरफेस पर काम कर रहा हूं जो ड्रैग और ड्रॉप का उपयोग करता है। जबकि मैं एक तत्व खींच रहा हूं, लक्ष्य को एक सीएसएस-क्लास मिलता है, जो इसे -webkit-एनीमेशन के कारण द्विपक्षीय रूप से घूमता है।

@-webkit-keyframes pulse { 
    0% { -webkit-transform: rotate(0deg); } 
    25% { -webkit-transform:rotate(-10deg); } 
    75% { -webkit-transform: rotate(10deg); } 
    100% { -webkit-transform: rotate(0deg); } 
    } 

.drag 
{ 
    -webkit-animation-name: pulse; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: ease-in-out; 
} 

जब मैं लक्ष्य छोड़ देता हूं, तो मैं इसे रोटेशन की वर्तमान स्थिति को अपनाना चाहता हूं।

मेरा पहला विचार सीएसएस संपत्ति को jquery और .css ('- webkit-transform') विधि के साथ जांचना था। लेकिन यह विधि सिर्फ 'कोई नहीं' लौटाती है।

तो मेरा प्रश्न: क्या एनीमेशन के माध्यम से घुमाए गए तत्व की वर्तमान डिग्री मान प्राप्त करने का कोई तरीका है?

धन्यवाद अब तक हेंड्रिक

Answer 1

मुझे हाल ही में एक ऐसा फ़ंक्शन लिखना पड़ा जो आप चाहते हैं! इसका उपयोग करने के लिए स्वतंत्र महसूस करें:

// Parameter element should be a DOM Element object. 
// Returns the rotation of the element in degrees. 
function getRotationDegrees(element) { 
    // get the computed style object for the element 
    var style = window.getComputedStyle(element); 
    // this string will be in the form 'matrix(a, b, c, d, tx, ty)' 
    var transformString = style['-webkit-transform'] 
         || style['-moz-transform'] 
         || style['transform'] ; 
    if (!transformString || transformString == 'none') 
     return 0; 
    var splits = transformString.split(','); 
    // parse the string to get a and b 
    var parenLoc = splits[0].indexOf('('); 
    var a = parseFloat(splits[0].substr(parenLoc+1)); 
    var b = parseFloat(splits[1]); 
    // doing atan2 on b, a will give you the angle in radians 
    var rad = Math.atan2(b, a); 
    var deg = 180 * rad/Math.PI; 
    // instead of having values from -180 to 180, get 0 to 360 
    if (deg < 0) deg += 360; 
    return deg; 
} 

आशा है कि इससे मदद मिलती है!

संपादित करें मैंने मैट्रिक्स 3 डी तारों के साथ काम करने के लिए कोड अपडेट किया है, लेकिन यह अभी भी 2 डी रोटेशन डिग्री (यानी जेड अक्ष के चारों ओर घूर्णन) देता है।

Answer 2

window.getComputedStyle (तत्व, नल) [ '- वेबकिट-परिणत'] एक स्ट्रिंग वर्तमान परिवर्तन आव्यूह को दर्शाने वापस आ जाएगी। आप उस स्ट्रिंग से इसकी रोटेशन डिग्री की गणना पहले इसे पार्स करके कर सकते हैं, फिर उस पर कुछ गणित लागू कर सकते हैं।