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

我有一个网站，我想要一个元素在点击时旋转360度。我听说旋转div元素的唯一方法是CSS

transform

属性。我试过一些不同的东西，比如

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

其中，

notrans

类使元素的转换时间为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）”；
}

：根目录{
--颜色：黑色；
--颜色：白色；
--背景颜色：白色；
--背景颜色：黑色；
--传输时间：0.5s；
}
#控制{
位置：绝对位置；
左：0；
最高：45%；
宽度：100%；
身高：30%；
字体大小：250%；
边框：1px实心变量（--颜色）；
边界半径：20px；
溢出：隐藏；
填充：0；
背景色：var（--color）；
}
.cp{
身高：25%；
宽度：0；
溢出：隐藏；
背景色：黑色；
}
.控制{
位置：绝对位置；
排名：0；
宽度：25%；
身高：100%；
边框：1px实心变量（--颜色）；
背景色：var（--背景色）；
颜色：var（--颜色）；
线高：75%；
变换：旋转（0度）；
边界半径：0；
转换：颜色变量（--transtime），背景颜色变量（--transtime）；
文本对齐：居中；
填充：5%；
}
.控件：悬停{
背景色：var（--hoverbackcolor）；
颜色：var（--hovercolor）；
}
#停顿{
左：25%；
线高：100%；
}
#落后的{
左：0；
线高：100%；
}
#自激振荡{
右：0；
}
#前进{
右：25%；
线高：100%；
}
#自激振荡{
线高：150%；
}
#斯基普林{
位置：绝对位置；
左：0；
最高：47.5%；
背景色：红色；
身高：5%；
宽度：100%；
变换：旋转（-45度）；
转换：var（--转换时间）；
}

↺
| |
↻
⏩

您想要这种行为吗

var微调器=document.querySelector（“微调器”）；
document.querySelector（“按钮”）.onclick=function（）{
spinner.style.animationName=“示例”；
setTimeout（函数（）{
spinner.style.animationName=“”；
}, 4000);
};
#微调器{
宽度：100px；
高度：100px；
显示器：flex；
柔性包装：包装；
背景色：红色；
边界半径：50%；
溢出：隐藏；
动画持续时间：4s；
位置：相对位置；
证明内容：中心；
对齐项目：居中；
}
#纺纱师{
宽度：50%；
身高：50%；
}
#旋转按钮{
位置：绝对位置；
光标：指针；
}
蓝先生{
背景颜色：蓝色；
}
格林先生{
背景颜色：绿色；
}
瑞德先生{
背景色：红色；
}
黄先生{
背景颜色：黄色；
}
@关键帧示例{
0%{变换：旋转（0度）}
100%{变换：旋转（360度）}
}

快速旋转
希望您至少尝试自己编写代码。我建议你做一些，或者通过谷歌，或者通过搜索，尝试一下。如果您仍然有问题，请返回您的代码并解释您尝试了什么。我已经尝试过了，并问了一个问题。但是谢谢你。所以用实际代码演示一下你的html代码是无效的。再次检查跨度元素