被扇区划分的圆不考虑溢出：隐藏

Question

我对以下.circle的溢出有问题。我需要旋转它，当角度为90/180/270/360/450等时，溢出中断了，并且可以看到<li>的某些部分。

我发现了两种解决方法-＃1稍微改变角度，＃2稍微改变宽度/高度，但是我想了解问题的起因。为什么会发生这种情况，如何在没有0.02px/0.01deg hack的情况下正确解决此问题？

body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 10px;
}

.circle {
  background-color: #444;
  border-radius: 50%;
  height: 150px;
  overflow: hidden;
  transform: rotate(90deg);
  width: 150px;
  display: inline-block;
  --accent: salmon;
}

li {
  background: var(--accent);
  border: 1px solid #444;
  box-sizing: border-box;
  height: 50%;
  list-style-type: none;
  position: absolute;
  right: 0px;
  top: 0px;
  transform-origin: 0px 100%;
  user-select: none;
  width: 50%
}

li:nth-child(1) {
  transform: rotate(0deg) skewY(-60deg) translate3d(0, 0, 0)
}

li:nth-child(2) {
  transform: rotate(30deg) skewY(-60deg) translate3d(0, 0, 0)
}

li:nth-child(3) {
  transform: rotate(60deg) skewY(-60deg) translate3d(0, 0, 0)
}

li:nth-child(4) {
  transform: rotate(90deg) skewY(-60deg) translate3d(0, 0, 0)
}

li:nth-child(5) {
  transform: rotate(120deg) skewY(-60deg) translate3d(0, 0, 0)
}

li:nth-child(6) {
  transform: rotate(150deg) skewY(-60deg) translate3d(0, 0, 0)
}

li:nth-child(7) {
  transform: rotate(180deg) skewY(-60deg) translate3d(0, 0, 0)
}

li:nth-child(8) {
  transform: rotate(210deg) skewY(-60deg) translate3d(0, 0, 0)
}

li:nth-child(9) {
  transform: rotate(240deg) skewY(-60deg) translate3d(0, 0, 0)
}

li:nth-child(10) {
  transform: rotate(270deg) skewY(-60deg) translate3d(0, 0, 0)
}

li:nth-child(11) {
  transform: rotate(300deg) skewY(-60deg) translate3d(0, 0, 0)
}

li:nth-child(12) {
  transform: rotate(330deg) skewY(-60deg) translate3d(0, 0, 0)
}

<div class="circle">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</div>

<div class="circle" style="transform: rotate(90.01deg); --accent: lightseagreen;">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</div>

<div class="circle" style="width: 150.02px; --accent: lightseagreen;">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</div>

<p>
  original
</p>
<p>
  transform: rotate(90.01deg)
</p>
<p>
  not square - 150.02px x 150px
</p>

Answer 1

它似乎与3D变换的使用有关。我不知道为什么，但是如果您删除它也可以正常工作（也不需要）