как установить маржинальную функцию для div

Question

Я пытаюсь заставить два кольца вращаться вокруг центральной точки. Поля выглядят правильными, но затем дивы появляются в нескольких случайных местах. Как мне это исправить? Кроме того, где находится точка, с которой начинается div, прежде чем он делает поле

.shell {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 1px;
  width: 1px;
  border-radius: 50%;
  background-color: black;
  animation: spin-right 1s linear infinite;
}
.electrons {
  top: 50%;
  left: 50%;
  text-align: center;
  visibility: visible;
  border-radius: 50%;
  background-color: green;
  height: 25px;
  width: 25px;
}
#electron1 {
  visibility: hidden;
  margin-top: -60px;
  margin-left: -60px;
}
#electron2 {
  visibility: hidden;
  margin-top: 60px;
  margin-left: 60px;
}
#electron3 {
  margin-top: -90px;
  margin-left: -90px;
}
#electron4 {
  margin-top: 90px;
  margin-left: 90px;
}
#electron5 {
  margin-top: -90px;
  margin-left: 90px;
}
#electron6 {
  margin-top: 90px;
  margin-left: -90px;
}
#electron7 {
  margin-top: -90px;
}
#electron8 {
  margin-left: 90px;
}
#electron9 {
  margin-left: -90px;
}
#electron10 {
  margin-top: 90px;
}
@keyframes spin-right {
  100% {
    transform: rotate(360deg);
  }
}

<div class="shell">
  <div class="electrons" id="electron1"></div>
  <div class="electrons" id="electron2"></div>
</div>
<div class="shell">
  <div class="electrons" id="electron3"></div>
  <div class="electrons" id="electron4"></div>
  <div class="electrons" id="electron5"></div>
  <div class="electrons" id="electron6"></div>
  <div class="electrons" id="electron7"></div>
  <div class="electrons" id="electron8"></div>
  <div class="electrons" id="electron9"></div>
  <div class="electrons" id="electron10"></div>
</div>

Answer 1

Если я хорошо вас понял, чтобы избежать тех случайных мест, вам просто нужно добавить position: absolute к вашему .electrons классу:)

Проверьте это здесь без анимации: https://jsfiddle.net/mshjy8re/

Тот же пример с пользовательскими тегами:

body {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

a-shell {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: black;
  animation: spin-right 1s linear infinite;
}

a-electron {
  position: absolute;
  border-radius: 50%;
  background-color: green;
  height: 25px;
  width: 25px;
}

a-electron:first-child {
  margin-top: -90px;
  margin-left: -90px;
}

a-electron:nth-child(2) {
  margin-top: 90px;
  margin-left: 90px;
}

a-electron:nth-child(3) {
  margin-top: -90px;
  margin-left: 90px;
}

a-electron:nth-child(4) {
  margin-top: 90px;
  margin-left: -90px;
}

a-electron:nth-child(5) {
  margin-top: -90px;
}

a-electron:nth-child(6) {
  margin-left: 90px;
}

a-electron:nth-child(7) {
  margin-left: -90px;
}

a-electron:last-child {
  margin-top: 90px;
}

@keyframes spin-right {
  100% {
    transform: rotate(360deg);
  }
}

<a-shell>
  <a-electron></a-electron>
  <a-electron></a-electron>
  <a-electron></a-electron>
  <a-electron></a-electron>
  <a-electron></a-electron>
  <a-electron></a-electron>
  <a-electron></a-electron>
  <a-electron></a-electron>
</a-shell>

Надеюсь, эта помощь ^^