CSS-旋转变换后图像偏离中心

Question

我正在重新创建Atom.io标头，其中有10个旋转的圆圈以不同的速度旋转。除了将 # A tibble: 342 x 2 prop n <dbl> <int> 1 0 7 2 0.00101 1 3 0.00102 2 4 0.00102 1 5 0.00102 1 6 0.00102 1 7 0.00103 1 8 0.00103 1 9 0.00104 1 10 0.00104 1 # ... with 332 more rows 属性应用于我的圈子时，它们已完成大部分工作，它们从原子图像移开。

我怀疑这是我的定位在某处有问题，但经过反复试验，我仍然找不到问题。

有人可以看到我的代码中的缺陷吗？

我已包含一个Codepen here

Answer 1

因此，在这种情况下的问题是，将动画应用于元素时，它将使用transform: rotate(Xdeg);来旋转元素。如果还没有使用transform: translate(-50%, -50%);属性完成居中，这将不是问题。这个问题以demonstrated in this post为例。

为了解决此问题，我们必须：

1. 更改动画中的旋转，使其也包含我们的transform: translate(-50%, -50%);。最终将是translate(-50%, -50%) rotate(Xdeg);
2. 更改在页面上处理居中的方式。

考虑第一个选项非常简单，我将举一个第二个选项的示例。本示例使用flex来使项目在页面上居中。这可以通过找到here的策略来完成。

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