CSS 旋转 360 度答案

【问题标题】：CSS rotation by 360 degreesCSS 旋转 360 度
【发布时间】：2017-02-12 18:27:44
【问题描述】：

我想使用 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 度或更多的旋转？

【问题讨论】：

由于使用的是关键帧，所以需要设置动画时长developer.mozilla.org/en-US/docs/Web/CSS/animation
是的，我还设置了动画时长：.animated.rotation { -webkit-animation-duration: 9s;动画持续时间：9s；但是，这不适用于 360 度。
更新您的代码以显示它...
现在更新了。
非常感谢LGSon！现在一切正常！抱歉这么晚才回答，我只是忘记将您的答案标记为正确。再次感谢您帮助我！

标签： javascript css animation rotation

【解决方案1】：

由于我们没有工作代码 sn-p，我在这里用发布的 CSS 做了一个，你应该可以这样做

div {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  border-top-left-radius: 10px;
  margin: 50px;
}
.animated.rotation {
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: rotation;
  animation-name: rotation;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  transform-origin: right center;
}

@keyframes rotation {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 360deg);
    transform: rotate3d(0, 0, 1, 360deg);
  }
}

&lt;div class="animated rotation"&gt;&lt;/div&gt;

【讨论】：