Animation CSS3变换上的动画：旋转。获取旋转元件当前度数的方法？

我正在开发一个html5界面，它使用拖放功能。当我拖动一个元素时，目标会得到一个css类，这使得它由于一个-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'）方法检查css属性。但是这个方法只返回“none”

所以我的问题是：有没有办法获得通过动画旋转的元素的当前度值

谢谢你 Hendrik

窗口。getComputedStyle（元素，null）['-webkit transform']将返回表示当前转换矩阵的字符串。

---

你可以从这个字符串中计算出它的旋转度，首先对它进行解析，然后对它进行一些数学运算。

我最近不得不编写一个函数，它可以完全满足你的需要！请随意使用它：

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

//参数元素应该是DOM元素对象。
//返回元素的旋转角度（以度为单位）。
函数getRotationDegrees（元素）{
//获取元素的计算样式对象
var style=window.getComputedStyle（元素）；
//该字符串的形式为“矩阵（a、b、c、d、tx、ty）”
var transformString=style['-webkit transform']
||样式['-moz转换']
||风格['transform']；
如果（！transformString | | transformString=='none'）
返回0；
var splits=transformString.split（'，'）；
//解析字符串以获得a和b
var parenLoc=splits[0]。indexOf（'（'）；
var a=parseFloat（拆分[0].substr（parenLoc+1））；
var b=parseFloat（拆分[1]）；
//在b上做atan2，a将给出以弧度为单位的角度
var rad=数学常数2（b，a）；
var deg=180*rad/Math.PI；
//不要将值设置为-180到180，而是设置为0到360
如果（度<0）度+=360；
返回度；
}

希望这有帮助

---

编辑我更新了代码以使用matrix3d字符串，但它仍然只提供2d旋转角度（即绕Z轴旋转）。

必须更改此行以使用较新的浏览器：var a=parseFloat（拆分[0]。substr（9））；感谢您让我知道。这是3d变换的问题，我刚刚更新了代码，使其能够处理2d和3d变换。此答案适用于CSS3 3DTransforms：3d矩阵的数学答案可以在此处找到：