变换防止元素居中

Question

为什么太阳不在绿色正方形的中心？CCD_ 1导致失真。

/* 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;
}

<div class="sunIcon">
<div class='allCircles'>
<div class="circle1 circleBoxes">
<div class="halfCircle circles"></div>
<div class="bgCircle circles"></div>
</div>
<div class="circle2 circleBoxes">
<div class="halfCircle circles"></div>
<div class="bgCircle circles"></div>
</div>
<div class="circle3 circleBoxes">
<div class="halfCircle circles"></div>
<div class="bgCircle circles"></div>
</div>
</div>
</div>

Answer 1

由于在父.circleBoxes上使用了绝对定位，您的内容没有对齐。假设这是transform按预期工作所必需的。一种解决方案是删除.allCircles上的固定高度和宽度，转而使用填充。请参阅我在下面所做的CSS更改。

/* 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;
}

<div class="sunIcon">
<div class='allCircles'>
<div class="circle1 circleBoxes">
<div class="halfCircle circles"></div>
<div class="bgCircle circles"></div>
</div>
<div class="circle2 circleBoxes">
<div class="halfCircle circles"></div>
<div class="bgCircle circles"></div>
</div>
<div class="circle3 circleBoxes">
<div class="halfCircle circles"></div>
<div class="bgCircle circles"></div>
</div>
</div>
</div>