html - 间距 CSS 动画

Question

我不是 CSS 专家，但我遇到了问题。在我的 website ，我有一个动画，其中图像围绕动画旋转。这些根本没有链接。

CSS:

#center {
    margin-top: 150px;
    margin-bottom: 150px;
    display: inline-block;
    width: 50px;
    height: 50px;
    font-size: 50px;
    line-height: 50px;
    position: relative;
}

.rotate {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    margin-right: 160px;
}

// ... code for animations

HTML(简体):

<div id="center">
    <div class="view">
          <div class="plane main">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
          </div>
        </div>
    <img class="rotate" src="favicon.png width="64" height="64">
    <img class="rotate" src="favicon.png width="64" height="64">
    <img class="rotate" src="favicon.png width="64" height="64">
    <img class="rotate" src="favicon.png width="64" height="64">
    <img class="rotate" src="favicon.png width="64" height="64">
    <img class="rotate" src="favicon.png width="64" height="64">
  </div>
</div>

我想做的是让 rotate 图像在内部动画周围循环，而不是它们的定位使其看起来像他们是。如果不完全更改我的代码，我怎么能做到这一点？正如我所说，我对 CSS 知之甚少，所以我看过的教程都没有真正告诉我如何轻松地做到这一点。提前致谢!

编辑:目前的动画又长又乱，所以我没有把它们放在这里，但它们在 jsfiddle 上.

Answer 1

你很接近。

从所有动画中删除第二个旋转。然后图像将始终面向中心。 more info

做:

@keyframes rotate-1 {
    from { transform: rotate(-30deg) translateY(-200px)}
    to { transform: rotate(330deg) translateY(-200px)}
}

代替:

@keyframes rotate-1 {
    from { transform: rotate(-30deg) translateY(-200px) rotate(30deg) }
    to { transform: rotate(330deg) translateY(-200px) rotate(-330deg) }
}