如何使用CSS让环形布局中的文本保持水平显示？

你的12分区环形布局通过父li元素的rotate()+skewY()实现分区划分，但.text元素的固定变换导致文本无法保持水平。解决思路是针对每个分区的旋转角度，为内部文本添加反向旋转，抵消父元素的旋转影响，具体修改如下：

修改步骤 #

1. 重置.text类的默认变换，移除固定旋转并改用flex布局实现居中：

.text {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* 移除原固定的rotate和skew，改为按需单独设置 */
}

2. 为每个分区的.text元素添加反向旋转+适配的skew，抵消父li的变换影响：

/* 第1个分区：父li旋转0deg，文本反向旋转0deg */
.circle-links li:first-child .text {
  background: green;
  transform: skewY(60deg) rotate(0deg);
}

/* 第2个分区：父li旋转30deg，文本反向旋转-30deg */
.circle-links li:nth-child(2) .text {
  background: tomato;
  transform: skewY(60deg) rotate(-30deg);
}

/* 第3个分区：父li旋转60deg，文本反向旋转-60deg */
.circle-links li:nth-child(3) .text {
  background: aqua;
  transform: skewY(60deg) rotate(-60deg);
}

/* 第4个分区：父li旋转90deg，文本反向旋转-90deg */
.circle-links li:nth-child(4) .text {
  background: yellow;
  transform: skewY(60deg) rotate(-90deg);
}

/* 第5个分区：父li旋转120deg，文本反向旋转-120deg */
.circle-links li:nth-child(5) .text {
  background: orange;
  transform: skewY(60deg) rotate(-120deg);
}

/* 第6个分区：父li旋转150deg，文本反向旋转-150deg */
.circle-links li:nth-child(6) .text {
  background: purple;
  transform: skewY(60deg) rotate(-150deg);
}

/* 第7个分区：父li旋转180deg，文本反向旋转-180deg */
.circle-links li:nth-child(7) .text {
  background: cyan;
  transform: skewY(60deg) rotate(-180deg);
}

/* 第8个分区：父li旋转210deg，文本反向旋转-210deg */
.circle-links li:nth-child(8) .text {
  background: brown;
  transform: skewY(60deg) rotate(-210deg);
}

/* 第9个分区：父li旋转240deg，文本反向旋转-240deg */
.circle-links li:nth-child(9) .text {
  background: gray;
  transform: skewY(60deg) rotate(-240deg);
}

/* 第10个分区：父li旋转270deg，文本反向旋转-270deg */
.circle-links li:nth-child(10) .text {
  background: pink;
  transform: skewY(60deg) rotate(-270deg);
}

/* 第11个分区：父li旋转300deg，文本反向旋转-300deg */
.circle-links li:nth-child(11) .text {
  background: maroon;
  transform: skewY(60deg) rotate(-300deg);
}

/* 第12个分区：父li旋转330deg，文本反向旋转-330deg */
.circle-links li:nth-child(12) .text {
  background: gold;
  transform: skewY(60deg) rotate(-330deg);
}

原理说明 #

每个li元素通过rotate(Ndeg) skewY(-60deg)实现扇形分区，内部.text元素通过skewY(60deg)抵消父元素的斜切变换，再通过rotate(-Ndeg)抵消父元素的旋转角度，配合flex布局让文本在分区内水平居中显示。修改后无论是文本还是后续替换的表情符号，都能保持水平状态。

内容的提问来源于stack exchange，提问作者tasos