Transform prevents element from centering

Question

Why is the sun not centered inside the green square? justify-content: center causes distortions.

/* 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 > .halfCircle {
  background: #ff5500;
  transform: rotate(225deg) scale(3.8, 3.8);
  z-index: 2;
}

.circle1 > .bgCircle {
  transform: scale(3.8, 3.8);
  background: #ff7900;
  z-index: 1;
}

/* Second Circle */
.circle2 > .halfCircle {
  background: #ff7900;
  transform: rotate(180deg) scale(2.8, 2.8);
  z-index: 4;
}

.circle2 > .bgCircle {
  transform: scale(2.8, 2.8);
  background: #ff9700;
  z-index: 3;
}

/* Third Circle */
.circle3 > .halfCircle {
  background: #ffaa00;
  transform: rotate(-45deg) scale(1.6, 1.6);
  z-index: 6;
}

.circle3 > .bgCircle {
  transform: scale(1.6, 1.6);
  background: #ff9700;
  z-index: 5;
}

user_16496357 · Answer

Your content is not aligning because of the absolute positioning used on the parent .circleBoxes. Assuming this is a must for the transform to work as intended. One solution would be to remove the fixed height and width on .allCircles and use padding instead. See the CSS changes I made below.

/* Sun Icon */

.sunIcon {
  display: flex;
  justify-content: flex-end;
  border: Red solid 2px;
}

.allCircles {
  padding: 25px 33px 25px 25px;
  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>.halfCircle {
  background: #ff5500;
  transform: rotate(225deg) scale(3.8, 3.8);
  z-index: 2;
}

.circle1>.bgCircle {
  transform: scale(3.8, 3.8);
  background: #ff7900;
  z-index: 1;
}


/* Second Circle */

.circle2>.halfCircle {
  background: #ff7900;
  transform: rotate(180deg) scale(2.8, 2.8);
  z-index: 4;
}

.circle2>.bgCircle {
  transform: scale(2.8, 2.8);
  background: #ff9700;
  z-index: 3;
}


/* Third Circle */

.circle3>.halfCircle {
  background: #ffaa00;
  transform: rotate(-45deg) scale(1.6, 1.6);
  z-index: 6;
}

.circle3>.bgCircle {
  transform: scale(1.6, 1.6);
  background: #ff9700;
  z-index: 5;
}

Transform prevents element from centering

1 Answers