Question

我想使用CSS将矩形旋转360度（或甚至> 360度）。旋转中心是＃34;右中心＆＃34;。如果我使用以下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度或更高的旋转？

Answer 1

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

＆＃13;

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);
  }
}

＆＃13;

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

＆＃13;

CSS旋转360度

1 个答案: