CSS - Image shifts away from center after rotation transformation

Question

I am recreating the Atom.io header where there is 10 spinning circles rotating at different speeds. I got most of it done except when I apply a tranform property to my circles, they shift away from atom image.

I suspect that it's my positioning that is wrong somewhere but after lots of trial and error I cannot find the problem.

Could anyone see a flaw in my code?

I've included a codepen here

This is caused by you applying the `transform: rotate(Xdeg);` in your animation. This just overrides the `transform: translate(-50%, -50%);` that you were using to center your circles instead of adding to it. — Chase Ingebritson, Jun 29 '18 at 17:29
you're totally right, I remember learning about that. How would I combine them in this case? the translate is on the parent and the rotation is on the child but the rotation is a full on animation? — asus, Jun 29 '18 at 17:43
The "cheaty" way would be to set the animation to just use `transform: rotate(Xdeg) translate(-50%, -50%);` or you could take a different route to centering the items, but that may be a bit difficult. — Chase Ingebritson, Jun 29 '18 at 17:59
I've now explained an alternative route to centering the elements in my answer below. — Chase Ingebritson, Jun 29 '18 at 18:11

Chase Ingebritson · Accepted Answer · 2018-06-29T18:17:00.950

So the issue in this case is that when the animation is applied to the element, it uses the transform: rotate(Xdeg); to rotate the element. This wouldn't be an issue had the centering not also been done using the transform: translate(-50%, -50%); property. This issue is demonstrated in this post as an example.

In order to fix this issue, we have to either:

Change the rotate in the animation to also include our transform: translate(-50%, -50%);. This would end up being translate(-50%, -50%) rotate(Xdeg);
Change the way that centering is handled on the page.

Considering the first option is pretty straightforward, I'm just going to give an example of the second option. This example uses flex to center the items on the page. This is done using the strategy found here.

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

I've also changed most of the classes and structure just for simplicity purposes and to demonstrate my solution.

*,
*::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>

CSS - Image shifts away from center after rotation transformation

1 Answers1