沿固定角度的圆形路径移动div

Question

我想知道是否可以沿固定角度的圆形路径移动div。例如。移动div只有45度的圆形路径而不是让它回到起点，就像摆锤一样。

希望，附上的图片对我的意思有意义。

非常感谢所有人的帮助。 展望未来，

Answer 1

您可以单独使用css animation执行此操作。首先，您应该将transform origin移动到服务器作为钟摆中心的点。现在，您可以简单地将旋转角度定义为相隔45度。请查看以下代码作为示例：

#container
{
  background-color: #777;
  border-radius: 50%;
  height: 20px;
  margin: 0 auto;
  margin-top: 150px;
  position: relative;
  width: 20px;
}

#ball
{
  animation: swing 1s ease 0s infinite;
  background-color: orange;
  border-radius: 50%;
  height: 50px;
  left: -15px;
  position: absolute;
  top: -150px;
  transform-origin: center 150px;
  width: 50px;
}

@keyframes swing{
  0%{transform: rotate(-22.5deg);}
  50%{transform: rotate(22.5deg);}
  100%{transform: rotate(-22.5deg);}
}

<div id="container">
  <div id="ball"></div>
</div>

Answer 2

根据您更新的要求（旋转时对象本身应始终垂直），我修改了以前的代码。

可能还有另一种方法，但我现在才能想到这一点。在这里，我已经包裹了我们原来的球＃39;另一个div里面的元素。现在，外部div执行正常的钟摆动画。但是，此外，内部对象还执行反向旋转动画，使动画期间的所有点都保持垂直直线。

请注意，内部对象的变换原点为默认值center center，因为它只需绕自己的轴旋转。

＆＃13;

＆＃13;

#container
{
  background-color: #777;
  border-radius: 50%;
  height: 20px;
  margin: 0 auto;
  margin-top: 150px;
  position: relative;
  width: 20px;
}

#ball
{
  animation: swing 1s ease 0s infinite;
  background-color: green;
  height: 50px;
  left: -15px;
  position: absolute;
  top: -150px;
  transform-origin: center 150px;
  width: 50px;
}

@keyframes swing{
  0%{transform: rotate(-22.5deg);}
  50%{transform: rotate(22.5deg);}
  100%{transform: rotate(-22.5deg);}
}

#main-content
{
  animation: innerswing 1s ease 0s infinite;
  background-color: red;
  display: block;
  height: 100%;
  width: 100%;
}

@keyframes innerswing{
  0%{transform: rotate(22.5deg);}
  50%{transform: rotate(-22.5deg);}
  100%{transform: rotate(22.5deg);}
}

＆＃13;

<div id="container">
  <div id="ball">
    <div id="main-content"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;