如何创建一条线并仅使用css围绕其中心旋转

Question

我是CSS的初学者。我找到了这个答案：https://stackoverflow.com/a/32560509/3617261。但我想知道如果可以仅使用CSS旋转创建的行，而不使用JavaScript。

Answer 1

您可以像这样使用CSS animation：

.line {
  display: inline-block;
  height: 2px;
  width: 100px;
  margin:100px;
  background: #000;
  animation:rotation 10s linear infinite; /* run the rotation for 10s and iterate again */
  transform-origin:center; /* rotate from the center */
}

@keyframes rotation {
  from {
    transform: rotate(0deg); /* start from 0 degree */
  }
  to {
    transform: rotate(360deg) /* end at 360 degree which the same as 0 degree to create the continuous loop*/
  }
}

<div class="line">
</div>

Answer 2

您可以使用变换旋转到特定位置。

transform: rotate(40deg);
transform-origin: center;

对于动画，您可以使用animation。

animation: spin 5s infinite;

“spin”是定义动作的关键帧的名称。

@keyframes spin {
    from { transform: rotation(0deg); }
    to { transform: rotation(360deg); }
}