javascript - 是否可以有一个不断旋转的 DIV 或图像？

Question

我想要一个图像或 DIV 在点击时开始旋转，类似于电唱机。是否有可能让它顺利并使用 javascript？

非常感谢您! :)

Answer 1

您必须在 CSS3 中进行旋转。

@keyframes rotate
{
     0%   { transform: rotate(0); }
     25%  { transform: rotate(90); }
     50%  { transform: rotate(180); }
     75%  { transform: rotate(270); }
     100% { transform: rotate(360); }
}

#rotating_div
{
    animation-name: rotate;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-play-state: paused;
}

这是 JavaScript:

function rotate(id) {
    div = getElementById['id'];
    div.style.animation-play-state = running;
}

这是 HTML:

<div id="rotating_div" onclick="rotate("rotating_div")"></div>

使用前缀 -moz- 和 -webkit- 让 CSS3 在 FF 和其他浏览器中工作。在这里看看:W3Schools.com

祝你好运! :)