title: Transform prevents element from centering
body: <p>Why is the sun not centered inside the green square? <code>justify-content: center</code> causes distortions.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Sun Icon */
  .sunIcon {
    display: flex;
    justify-content: flex-end;
    border: Red solid 2px;
  }
  
  .allCircles {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: green solid 2px;
  }
  
  .circleBoxes {
    position: absolute;
    border: yellow solid 1px;
    display: flex;
    align-items: center;
  }
  
  .circles {
    position: absolute;
    overflow: hidden;
  }
  
  .bgCircle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
  
  .halfCircle {
    width: 5px;
    height: 10px;
    border-radius: 100px 0 0 100px;
    transform-origin: right;
  }
  
  /* First Circle */
  .circle1 &gt; .halfCircle {
    background: #ff5500;
    transform: rotate(225deg) scale(3.8, 3.8);
    z-index: 2;
  }
  
  .circle1 &gt; .bgCircle {
    transform: scale(3.8, 3.8);
    background: #ff7900;
    z-index: 1;
  }
  
  /* Second Circle */
  .circle2 &gt; .halfCircle {
    background: #ff7900;
    transform: rotate(180deg) scale(2.8, 2.8);
    z-index: 4;
  }
  
  .circle2 &gt; .bgCircle {
    transform: scale(2.8, 2.8);
    background: #ff9700;
    z-index: 3;
  }
  
  /* Third Circle */
  .circle3 &gt; .halfCircle {
    background: #ffaa00;
    transform: rotate(-45deg) scale(1.6, 1.6);
    z-index: 6;
  }
  
  .circle3 &gt; .bgCircle {
    transform: scale(1.6, 1.6);
    background: #ff9700;
    z-index: 5;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="sunIcon"&gt;
          &lt;div class='allCircles'&gt;
              &lt;div class="circle1 circleBoxes"&gt;
                  &lt;div class="halfCircle circles"&gt;&lt;/div&gt;
                  &lt;div class="bgCircle circles"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="circle2 circleBoxes"&gt;
                  &lt;div class="halfCircle circles"&gt;&lt;/div&gt;
                  &lt;div class="bgCircle circles"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="circle3 circleBoxes"&gt;
                  &lt;div class="halfCircle circles"&gt;&lt;/div&gt;
                  &lt;div class="bgCircle circles"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>