CSS - изображение смещается от центра после преобразования вращения

Question

Я воссоздаю заголовок Atom.io , в котором 10 вращающихся кругов вращаются с разными скоростями. Я сделал большую часть этого, за исключением того, что когда я применил свойство tranform к своим кругам, они отклонились от изображения атома.

Я подозреваю, что это мое расположение где-то неправильно, но после многих проб и ошибок я не могу найти проблему.

Может ли кто-нибудь увидеть изъян в моем коде?

Я включил кодовую ручку здесь

Answer 1

Таким образом, проблема в этом случае заключается в том, что когда анимация применяется к элементу, она использует transform: rotate(Xdeg); для поворота элемента. Это не было бы проблемой, если бы центрирование также не было выполнено с использованием свойства transform: translate(-50%, -50%);. Эта проблема продемонстрирована в этом сообщении в качестве примера.

Чтобы решить эту проблему, мы должны либо:

1. Измените вращение в анимации, чтобы включить также transform: translate(-50%, -50%);. Это будет в конечном итоге translate(-50%, -50%) rotate(Xdeg);
2. Изменить способ обработки центрирования на странице.

Учитывая, что первый вариант довольно прост, я просто приведу пример второго варианта. В этом примере используется flex для центрирования элементов на странице. Это делается с использованием стратегии, найденной здесь .

.example-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

Я также изменил большинство классов и структур только для простоты и демонстрации своего решения.

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
}

body {
  box-sizing: border-box;
  padding: 0;
  background-color: #343233;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

body {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  /*font-size: 16px;*/
  line-height: 1.7;
}

.full-page {
  height: 100vh;
  width: 100vw;
}

.flex-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper {
  width: 366px;
  height: 366px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper .logo {
  position: absolute;
}

.wrapper .logo .wordmark,
.wrapper .logo .icon {
  display: block;
  margin-bottom: 10px;
}

.wrapper .circles {
  width: 100%;
  height: 100%;
  margin: auto;
  position: relative;
}

.wrapper .circles .circle {
  position: absolute;
  animation-name: rotating;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.wrapper .circles .circle:nth-child(1) {
  animation-duration: 20s;
}

.wrapper .circles .circle:nth-child(2) {
  animation-duration: 18s;
}

.wrapper .circles .circle:nth-child(3) {
  animation-duration: 31s;
}

.wrapper .circles .circle:nth-child(4) {
  animation-duration: 33s;
}

.wrapper .circles .circle:nth-child(5) {
  animation-duration: 33s;
}

.wrapper .circles .circle:nth-child(6) {
  animation-duration: 34s;
}

.wrapper .circles .circle:nth-child(7) {
  animation-duration: 45s;
}

.wrapper .circles .circle:nth-child(8) {
  animation-duration: 40s;
}

.wrapper .circles .circle:nth-child(9) {
  animation-duration: 44s;
}

.wrapper .circles .circle:nth-child(10) {
  animation-duration: 46s;
}

<section class="full-page flex-container">
  <div class="wrapper flex-container">
    <div class="logo">
      <img src="https://github-atom-io-herokuapp-com.global.ssl.fastly.net/assets/index-atom-wordmark-65fad016a61e71c82c2cdd18d94e911f.svg" alt="logo" class="wordmark">
      <img src="https://github-atom-io-herokuapp-com.global.ssl.fastly.net/assets/index-logo-9fb707770c2c8a018b7a2933906c3436.svg" alt="atom" class="icon">
    </div>
    <div class="circles">
      <img src="https://github-atom-io-herokuapp-com.global.ssl.fastly.net/assets/index-portal-red-semi-085b4e44d49b2ffe935cc1b2b3094ce8.svg" alt="c1" class="circle">
      <img src="https://github-atom-io-herokuapp-com.global.ssl.fastly.net/assets/index-portal-red-be5d1b8a52c13bf286560aba3e4c8c30.svg" alt="c2" class="circle">
      <img src="https://github-atom-io-herokuapp-com.global.ssl.fastly.net/assets/index-portal-orange-semi-d2010f0f8e41e03dbf2b5c52166abe4b.svg" alt="c3" class="circle">
      <img src="https://github-atom-io-herokuapp-com.global.ssl.fastly.net/assets/index-portal-orange-b3bddfb758b91d22f43d0e14ed8e29da.svg" alt="c4" class="circle">
      <img src="https://github-atom-io-herokuapp-com.global.ssl.fastly.net/assets/index-portal-yellow-semi-545681fe77ff01659d472bd379a9f38b.svg" alt="c5" class="circle">
      <img src="https://github-atom-io-herokuapp-com.global.ssl.fastly.net/assets/index-portal-yellow-ff207a58ad4f450ea9ac0e17224b39f1.svg" alt="c6" class="circle">
      <img src="https://github-atom-io-herokuapp-com.global.ssl.fastly.net/assets/index-portal-green-semi-2d5bc571ee90e710d93f7ae7ddd06e85.svg" alt="c7" class="circle">
      <img src="https://github-atom-io-herokuapp-com.global.ssl.fastly.net/assets/index-portal-green-6ab85a1e7343a232273868031b242806.svg" alt="c8" class="circle">
      <img src="https://github-atom-io-herokuapp-com.global.ssl.fastly.net/assets/index-portal-blue-semi-7333f1323549be50644411b691b173dd.svg" alt="c9" class="circle">
      <img src="https://github-atom-io-herokuapp-com.global.ssl.fastly.net/assets/index-portal-blue-92fc2c151190795bd0147c03d4fb8352.svg" alt="c10" class="circle">
    </div>
  </div>
</section>