Animazione CSS3 su trasformazione: ruota. Modo di recuperare deg deg dell'elemento rotante?

Question

sto lavorando su un'interfaccia html5 che usa il drag and drop. Mentre sto trascinando un elemento, il target ottiene una classe css, che lo fa ruotare bidirezionalmente a causa di un'animazione -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; 
} 

Quando rilasciare il target, desidero che esso adotti lo stato di rotazione corrente.

Il mio primo pensiero è stato controllare la proprietà css con jquery e il metodo .css ('- webkit-transform'). Ma questo metodo restituisce solo "nessuno".

Quindi la mia domanda: esiste un modo per ottenere il valore attuale del grado di un elemento che viene ruotato tramite l'animazione?

Grazie finora Hendrik

Answer 1

Recentemente ho dovuto scrivere una funzione che fa esattamente quello che vuoi! Sentiti libero di usarlo:

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

Spero che questo aiuti!

EDIT Ho aggiornato il codice per lavorare con le stringhe Matrix3D, ma ancora contiene solo i gradi di rotazione 2d (es. Rotazione intorno all'asse Z).

Answer 2

window.getComputedStyle (elemento, null) [ '- webkit trasformare'] restituirà una stringa che rappresenta matrice di trasformazione corrente. È possibile calcolare il suo grado di rotazione da quella stringa prima analizzandola, quindi applicando qualche matematica su di essa.