对变换CSS3动画:旋转。的方式来获取旋转元件的电流度? [英] CSS3 animation on transform: rotate. Way to fetch current deg of the rotating element?
问题描述
我是一个HTML5接口至极的工作使用拖放。当我拖着一个元素,目标获得一个CSS类,这使得它旋转双向由于一个-webkit-动画。
i am working on a html5 interface wich uses drag and drop. While i am dragging an element, the target gets a css-class, which makes it bidirectionally rotate due to a -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;
}
当我把目标,我想它采用旋转的当前状态。
When I drop the target, I want it to adopt the current state of rotation.
我首先想到的是检查与jQuery的CSS属性和的.css(' - WebKit的变换')的方法。但这种方法只返回无。
My first thought was to check the css property with jquery and the .css('-webkit-transform') method. But this method just returns 'none'.
所以我的问题:是否有一种方式来获得它通过旋转的动画元素的当前度数值
So my question: Is there a way to get the current degree value of an element which is rotated via animation?
由于至今
亨德里克
Thanks so far Hendrik
推荐答案
我最近写的不正是你想要的,一个功能!随意使用它:
I recently had to write a function that does exactly what you want! Feel free to use it:
// 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;
}
希望这有助于!
修改我更新了code用的Matrix3D字符串的工作,但它仍然只给出了二维旋转度(绕Z轴即旋转)。
EDIT I updated the code to work with matrix3d strings, but it still only gives the 2d rotation degrees (ie. rotation around the Z axis).
这篇关于对变换CSS3动画:旋转。的方式来获取旋转元件的电流度?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!