animación de CSS3 en la transformación: rotar. ¿Forma de obtener el grado actual del elemento giratorio?

Question

estoy trabajando en una interfaz html5 que usa arrastrar y soltar. Mientras estoy arrastrando un elemento, el objetivo obtiene una clase css, lo que hace que gire bidireccionalmente debido a una animación de -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; 
} 

Cuando dejo caer el objetivo, quiero que adopte el estado actual de rotación.

Mi primer pensamiento fue verificar la propiedad css con jquery y el método .css ('- webkit-transform'). Pero este método simplemente devuelve 'ninguno'.

Así que mi pregunta: ¿Hay alguna manera de obtener el valor de grado actual de un elemento que se gira mediante animación?

Gracias hasta ahora Hendrik

Answer 1

¡Recientemente tuve que escribir una función que hace exactamente lo que quiere! Siéntase libre de 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; 
} 

Hope this helps!

EDIT Actualicé el código para trabajar con strings matrix3d, pero solo da los grados de rotación 2d (es decir, la rotación alrededor del eje Z).

Answer 2

window.getComputedStyle (elemento, null) [ '- webkit-transformar'] volverán una cadena que representa matriz de transformación actual. Puede calcular su grado de rotación a partir de esa cadena analizándolo primero, y luego aplicando algunas matemáticas sobre él.