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

Question

我正在重新创建 Atom.io头部有 10 个以不同速度旋转的旋转圈。除了当我将 tranform 属性应用到我的圆圈时，我完成了大部分工作，它们从原子图像移开。

我怀疑是我的定位有误，但经过多次试验和错误后我找不到问题。

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

我已经包含了一个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>