如何使用 js 和 css 无变量转换使元素旋转

Question

我有一个网站，我想要一个元素在被点击时旋转 360 度一次。我听说旋转 div 元素的唯一方法是 CSS transform 属性。我尝试了一些不同的东西，比如

    backward.classList.add("notrans");
    backward.style.transform = "rotateZ(0deg)";
    backward.classList.remove("notrans");
    backward.style.transform = "rotateZ(-360deg)";

其中 notrans class 使元素的过渡时间为 0 秒，并且

backward.style.transition = "0s";
backward.style.transform = "rotateZ(0deg)";
backward.style.transition = transtime;
backward.style.transform = "rotateZ(360deg)";

这是我现在使用的源代码：

var backward = document.getElementById("backward");

var Backward = function() {bgm.currentTime -= 10;
    backward.classList.add("notrans");
    backward.style.transform = "rotateZ(0deg)";
    backward.classList.remove("notrans");
    backward.style.transform = "rotateZ(-360deg)";
}

:root {
--color: black;
--hovercolor: white;
--backcolor: white;
--hoverbackcolor: black;
--transtime: 0.5s;
}

#controls {
position: absolute;
left: 0;
top: 45%;
width: 100%;
height: 30%;
font-size: 250%;
border: 1px solid var(--color);
border-radius: 20px;
overflow: hidden;
padding: 0;
background-color: var(--color);
}

.cp {
  height: 25%;
  width: 0;
  overflow: hidden;
  background-color: black;
}

.controls {
  position: absolute;
  top: 0;
  width: 25%;
  height: 100%;
  border: 1px solid var(--color);
  background-color: var(--backcolor);
  color: var(--color);
  line-height: 75%;
  transform: rotateZ(0deg);
  border-radius: 0;
  transition: color var(--transtime), background-color var(--transtime);
  text-align: center;
  padding: 5%;
}

.controls:hover {
  background-color: var(--hoverbackcolor);
  color: var(--hovercolor);
}

#pause {
  left: 25%;
  line-height: 100%;
}

#backward {
  left: 0;
  line-height: 100%;
}

#autoskip {
  right: 0;
}

#forward {
  right: 25%;
  line-height: 100%;
}

#autoskip {
  line-height: 150%;
}

#skipline {
  position: absolute;
  left: 0;
  top: 47.5%;
  background-color: red;
  height: 5%;
  width: 100%;
  transform: rotateZ(-45deg);
  transition: var(--transtime);
}

<!DOCTYPE html>
<html>

<body>
  <div id="controls">
    <div id="15" class="cp">
      <div id="backward" class="controls"><span class="rot"><span class = "button">&#8634;</span></span>
      </div>
    </div>
    <div id="22" class="cp">
      <div id="pause" class="controls"><span class="button">| |</span></span>
      </div>
    </div>
    <div id="33" class="cp">
      <div id="forward" class="controls"><span class="rot"><span class = "button">&#8635;</span></span>
      </div>
    </div>
    <div id="44" class="cp">
      <div id="autoskip" class="controls"><span class="button">&#9193;</span>
        <div id="skipline"></div>
      </div>
    </div>
  </div>
</body>

</html>

如您所见，按下后退按钮时它没有旋转。

有什么帮助吗？

仅供参考：代码片段中有很多额外的东西，例如 CSS 变量，但这些都是必需的。

Answer 1

你想要这种行为吗？

var spinner = document.querySelector("#spinner");
document.querySelector("button").onclick = function() {
  spinner.style.animationName = "example";
  setTimeout(function() {
    spinner.style.animationName = "";
  }, 4000);
};

#spinner {
  width: 100px;
  height: 100px;
  display: flex;
  flex-wrap: wrap;
  background-color: red;
  border-radius: 50%;
  overflow: hidden;
  animation-duration: 4s;
  position: relative;
  justify-content: center;
  align-items: center;
}

#spinner div {
  width: 50%;
  height: 50%;
}

#spinner button {
  position: absolute;
  cursor: pointer;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

@keyframes example {
  0%   {transform: rotate(0deg)}
  100% {transform: rotate(360deg)}
}

<div id="spinner">
  <div class="blue"></div>
  <div class="red"></div>
  <div class="green"></div>
  <div class="yellow"></div>
  <button>Spin</button>
</div>

如何使用 js 和 css 无变量转换使元素旋转

How to make an element spin with js and css transitions without variables

javascript

css

css-transitions