CSS旋轉360度

Question

我想使用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;
}

但是，如果我用大於等於360度的角度替換了180度，它將不再起作用。 例如，在360度的情況下，不會發生任何事情，因為起始位置等於旋轉的結束位置。

如何實現360度以上的旋轉？

Answer 1

由於我們沒有可用的代碼段，因此我在這里用了已發布的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); } } 

 <div class="animated rotation"></div>