CSS3用于图像旋转的动画，参数由javascript控制

我想持续高效地旋转图像——它必须在移动浏览器上平稳工作。我目前正在使用CSS3动画。我希望能够使用javascript控制CSS功能（启动、停止、设置旋转速度、轻松获得额外积分）。 这里是我到目前为止做的旋转本身。需要JS

谢谢

HTML:

JS:TODO

Rotate = {
  speed: 4,
  start: function () {
  },
  stop: function () {
  },
  setSpeed: function () {
  },
  setEasing: function () {
  }
};

---

CSS3动画功能可以由javascript操作，根据您的问题，代码如下所示

    start: function () {
        var elem = document.getElementById('elementId');
        elem.style.animationPlayState = 'running';
    },
    stop: function () {
        var elem = document.getElementById('elementId');
        elem.style.animationPlayState = 'paused';
    },
    setSpeed: function (newSpeed) {
        var elem = document.getElementById('elementId');
        elem.style.animationDuration= newSpeed;
    },
    setEasing: function (newEasing) {
        var elem = document.getElementById('elementId');
        //whatever you want to change
    }

更新

.形象{
位置：绝对位置；
最高：50%；
左：50%；
宽度：120px；
高度：120px；
裕度：-60px0-60px；
-webkit动画：旋转4s线性无限；
-moz动画：旋转4s线性无限；
动画：旋转4s线性无限；
}
@-moz关键帧旋转{
100% {
-moz变换：旋转（360度）；
}
}
@-webkit关键帧旋转{
100% {
-webkit变换：旋转（360度）；
}
}
@关键帧旋转{
100% {
-webkit变换：旋转（360度）；
变换：旋转（360度）；
}
}
开始
停止
速度
耳鸣
旋转={
速度：4，
开始：函数（）{
var elem=document.getElementById（'theImage'）；
elem.style.animationPlayState='running'；
},
停止：函数（）{
var elem=document.getElementById（'theImage'）；
elem.style.animationPlayState='暂停'；
},
设置速度：功能（新闻速度）{
var elem=document.getElementById（'theImage'）；
elem.style.animationDuration=新闻速度；
},
setEasing：函数（newEasing）{
var elem=document.getElementById（'theImage'）；
//无论你想改变什么
}
};

这就是我所知道的。我不知道如何让js与CSS交互（这就是问题所在）。谢谢，谢谢。不幸的是，恐怕我不知道如何让你的代码工作。我不知道如何做的方面（使js和CSS交互）在您的代码中是假定的——也许它们对您来说是显而易见的。您愿意将其编辑为工作代码吗？也许是一把小提琴？再次感谢。当然，这不是一个完美的代码，我只是想给你一个想法。非常感谢你的帮助性回答，我接受了并投了赞成票。这是一个很好的例子，非常有用。我怀疑其他很多人也会从中受益。另外，在JS中是否可以获得对象的当前旋转位置？类似于：getPosition:function（）{var elem=document.getElementById（'theImage'）；？}，不客气，我很高兴您发现我的答案很有用。

Rotate = {
  speed: 4,
  start: function () {
  },
  stop: function () {
  },
  setSpeed: function () {
  },
  setEasing: function () {
  }
};

    start: function () {
        var elem = document.getElementById('elementId');
        elem.style.animationPlayState = 'running';
    },
    stop: function () {
        var elem = document.getElementById('elementId');
        elem.style.animationPlayState = 'paused';
    },
    setSpeed: function (newSpeed) {
        var elem = document.getElementById('elementId');
        elem.style.animationDuration= newSpeed;
    },
    setEasing: function (newEasing) {
        var elem = document.getElementById('elementId');
        //whatever you want to change
    }