如何实现环形箭头旋转时，中心数字保持固定不旋转？

核心方案 #

将旋转元素（环形背景+指示三角）与固定数字元素分离，让旋转仅作用在前者，数字容器独立定位在中心，彻底避免跟随旋转。

修改后的HTML代码 #

<div class="arrow-container">
    <!-- 仅负责旋转的环形和三角 -->
    <div class="cercle" id="fleche">
        <div class="triangle"></div>
    </div>
    <!-- 固定居中的数字容器 -->
    <div class="middle">
        <p id="vitesse">1306</p>
    </div>
</div>

修改后的CSS代码 #

.arrow-container {
    position: relative;
    height: 80%; /* 和原环形高度保持一致 */
    aspect-ratio: 1/1;
}

.cercle {
    border-radius: 50%;
    height: 100%;
    aspect-ratio: 1/1;
    background: linear-gradient(45deg, pink, red);
    rotate: 0deg;
    transition: 350ms;
    position: relative;
}

.triangle {
    width: 0;
    border-style: solid;
    border-width: 20px;
    border-color: transparent transparent black transparent;
    position: absolute;
    top: -7.2%;
    left: 50%;
    transform: translateX(-50%); /* 替代硬编码margin，让三角始终水平居中 */
}

.middle {
    border-radius: 50%;
    height: 92%;
    width: 92%;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 绝对定位实现完美居中，不受父元素旋转影响 */
}

#vitesse {
    color: white; /* 可选：让数字在黑色背景上更清晰 */
    font-size: 1.5rem;
    margin: 0;
}

关键改动说明 #

1. 新增父容器.arrow-container：作为相对定位的基准，统一管理旋转元素和固定元素的位置关系。
2. 元素分离：
   • .cercle仅保留环形背景和指示三角，专注接收旋转指令。
   • 数字容器.middle独立出来，通过绝对定位+transform居中，完全脱离旋转逻辑。
3. 优化三角定位：用transform: translateX(-50%)替代硬编码的margin-left，确保旋转时三角始终指向环形顶部中心。
4. 解决裁切问题：由于数字容器不再是旋转元素的子节点，无需反向旋转，自然不会出现裁切或偏移。

修改后，你可以继续给.cercle设置rotate属性控制箭头指向，中心数字会始终保持水平居中且不跟随旋转。

内容的提问来源于stack exchange，提问作者Tsu'Na