代码之家 › 专栏 › 技术社区 › asus

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

css-transforms css

asus · 技术社区 · 6 年前

我正在重现 Atom.io 有10个旋转圈以不同速度旋转的收割台。除了申请 tranform 属性到我的圆,它们从原子图像转移。

我怀疑是我的定位错了,但经过多次尝试和错误,我找不到问题所在。

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

我包括一个密码笔 here

1 回复 | 直到 6 年前

Chase Ingebritson 6 年前

因此,本例中的问题是,当动画应用于元素时,它使用 transform: rotate(Xdeg); 旋转元素。如果没有使用 transform: translate(-50%, -50%); 财产。这个问题是 demonstrated in this post 作为一个例子。

为了解决这个问题,我们必须:

更改动画中的旋转也包括 转换:转换(-50%,-50%); 是的。结果会是 translate(-50%, -50%) rotate(Xdeg);
更改页面上对中的处理方式。

考虑到第一个选项非常简单,我将给出第二个选项的示例。本例使用 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>