如何用SCSS让环绕圆形的所有文本元素保持水平？

核心思路是：给每个环绕圆周的元素先旋转到对应位置，再给文本元素反向旋转相同角度，抵消父元素的旋转，从而让文本保持水平。结合Sass循环可以自动适配任意数量的元素，具体修改如下：

1. 定义关键变量（可根据需求调整）：

$item-count: 8; // 环绕的元素总数，支持任意正整数
$circle-radius: 150px; // 圆周半径

2. 修改循环逻辑，添加反向旋转抵消：

@for $i from 1 through $item-count {
  .item:nth-child(#{$i}) {
    // 计算当前元素的旋转角度
    $angle: (360 / $item-count) * ($i - 1);
    // 先旋转到对应位置，再平移到圆周，最后反向旋转抵消，让文本初始方向水平
    transform: rotate($angle * 1deg) translate($circle-radius) rotate(-$angle * 1deg);
    
    // 保持WiFi信号向外指向（根据你的需求调整旋转角度）
    .wifi {
      transform: rotate(-$angle * 1deg);
    }
    
    // 确保文本保持水平，可选添加样式避免文本重叠
    .text {
      transform: rotate(-$angle * 1deg);
      white-space: nowrap;
      margin-top: 10px; // 调整文本与WiFi的间距
    }
  }
}

原理说明 #

• 第一个rotate($angle * 1deg)：将元素整体旋转到圆周上的目标位置
• translate($circle-radius)：把元素从圆心平移到圆周边缘
• 第二个rotate(-$angle * 1deg)：反向旋转元素，抵消之前的旋转，让文本恢复水平状态
• WiFi信号的单独旋转：因为父元素已经做了反向旋转，所以需要给.wifi单独旋转回对应角度，保证它始终向外指向

这种方案无需手动计算每个元素的角度，修改$item-count变量就能适配任意数量的环绕元素，文本始终保持水平。

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