Javascript CSS 360度旋转

我想使用CSS将矩形旋转360度（甚至>360度）。旋转的中心是“右中心”。如果我使用以下CSS代码进行180度的旋转（并使用JavaScript触发旋转），则效果良好：

.animated.rotation {
  -webkit-animation-duration: 9s;
  animation-duration: 9s;
}

@keyframes rotation {
      from {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    opacity: 1;
    -webkit-animation-timing-function: linear;
  }

to {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: rotate3d(0, 0, 1, 180deg);
    transform: rotate3d(0, 0, 1, 180deg);
    opacity: 1;
    -webkit-animation-timing-function: linear;
  }
}

.rotation {
  animation-name: rotation;
}

但是，如果我将180度替换为大于等于360度的角度，它将不再工作。例如，在360度的情况下，不会发生任何情况，因为开始位置等于旋转的结束位置

---

如何实现360度或更高的旋转

由于我们没有可用的代码片段，我在这里用发布的CSS制作了一个，您应该可以这样做

div{
宽度：50px；
高度：50px；
边框：1px纯黑；
边框左上半径：10px；
利润率：50像素；
}
.旋转{
-webkit动画持续时间：4s；
动画持续时间：4s；
-webkit动画计时功能：线性；
动画计时功能：线性；
-webkit动画名称：旋转；
动画名称：旋转；
-webkit动画迭代计数：无限；
动画迭代次数：无限；
变换原点：右中心；
}
@关键帧旋转{
从{
-webkit变换：旋转3D（0,0,1,0度）；
变换：旋转3d（0,0,1,0度）；
}
到{
-webkit变换：旋转3D（0,0,1,360度）；
变换：旋转3d（0,0,1,360度）；
}
}

---

因为您使用的是关键帧，所以需要设置动画持续时间是的，我还设置了动画持续时间：.animated.rotation{-webkit animation duration:9s；animation duration:9s；}但是，这在360度内不起作用。请更新您的代码以显示它……它现在已经更新了。非常感谢您！现在一切都很好！很抱歉这么晚才回答，我刚才忘了把你的答案标记为正确。所以再次感谢你帮助我！