Abstand einer CSS-Animation

Question

Ich bin kein Experte für CSS und habe ein Problem. Auf meiner website habe ich eine Animation, in der Bilder um eine Animation kreisen. Diese sind überhaupt nicht verknüpft.

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 (vereinfacht):

<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> 

Was ich möchte, ist zu tun, machen die rotate Bilder um die innere Animation, statt ihre Positionierung Herstellung zirkulieren es scheint wie sie sind. Wie könnte ich das tun, ohne meinen Code komplett zu ändern? Wie gesagt, ich weiß nicht viel über CSS, also sagt mir keines der Tutorials wirklich, wie ich das leicht machen könnte. Danke im Voraus!

EDIT: Die aktuellen Animationen sind lang und chaotisch, also habe ich sie hier nicht aufgenommen, aber sie sind auf einem jsfiddle.

Answer 1

Sie sind in der Nähe.

Entfernen Sie die zweite Drehung aus allen Animationen. Dann werden die Bilder immer zur Mitte zeigen. more info

Do:

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

Statt:

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