侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

转换时的CSS3动画:旋转.获取旋转元件的当前度数的方法是什么?

2022-08-01 星期一 / 0 评论 / 0 点赞 / 210 阅读 / 2173 字

我正在使用拖放的html5界面.当我拖动一个元素时,目标会获得一个css类,这使得它由于-webkit-animation而双向旋转. @-webkit-keyframes pulse {

...我正在使用拖放的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轴旋转).

. ..

广告 广告

评论区