我正在使用拖放的html5界面.当我拖动一个元素时,目标会获得一个css类,这使得它由于-webkit-animation而双向旋转.
@-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’.
所以我的问题是：有没有办法获得通过动画旋转的元素的当前度数值？
谢谢到目前为止
亨德里克
解决方法
我最近不得不写一个完全符合你想要的功能！随意使用它：
// 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;
}
希望这可以帮助！
编辑我更新了代码以使用matrix3d字符串,但它仍然只给出2d旋转度(即绕Z轴旋转).
