CSS 和 Javascript 旋转只能在 onclick 上运行一次？

Question

我用它来旋转 div

onclick

事件：

function ghum(){
    document.getElementById("earth").className += " rotate";
}

然后逆时针旋转：

function revghum(){
    document.getElementById("earth").className += " revrotate";
}

但它只能工作一次。还有一个问题是，如果我在第一个事件之前单击第二个事件，那么第一个事件将自动不起作用。

我实际上希望这个 div 每次点击时都会旋转。 这是例子 http://maatren.com/earth/

在旋转和反向旋转中，我仅使用变换和过渡来旋转 div，而在 id Earth 中，我使用背景图像，而没有任何变换和过渡。

Answer 1

您的班级=“旋转rerotate 旋转rerotate 旋转rerotate 旋转rerotate”

Answer 2

您可以使用 jQuery 的“addClass”和“removeClass”，但不能继续使用“className +=”添加类名。

API添加类： http://api.jquery.com/addClass/

API移除类： http://api.jquery.com/removeClass/

Answer 3

使用js，您可以在元素上使用切换方法，例如

.classList.toggle('rotate')