CSS3 动画变换：旋转。如何获取旋转元件的当前角度？

发布于 2024-09-11 06:55:51 字数 683 浏览 1 评论 0原文

我正在开发一个使用拖放功能的 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”。

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

到目前为止谢谢亨德里克

原文

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.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

很酷又爱笑 2024-09-18 06:55:55

我最近必须编写一个函数来完全满足您的要求！请随意使用它：

// 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轴的旋转）。

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

Hope this helps!

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).

回复收藏 0 原文