如何固定旋转圆形内的中心数字？前端CSS布局问题求解

方案一：将中心元素移出旋转容器（推荐） #

核心思路是让#ToFind脱离旋转的.circle容器，直接挂载在body下，通过绝对定位固定到页面中心，彻底不受父容器旋转影响。

修改后的代码 #

HTML

<div class="circle" id="circle">
    <div class="random" id="random1">A</div>
    <div class="random" id="random2">A</div>
    <div class="random" id="random3">A</div>
    <div class="random" id="random4">A</div>
    <div class="random" id="random5">A</div>
    <div class="random" id="random6">A</div>
    <div class="random" id="random7">A</div>
    <div class="random" id="random8">A</div>
</div>
<div class="ToFind" id="ToFind">A</div>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

body {
    height: 100vh;
    width: 100vw;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* 添加相对定位，作为#ToFind的定位参考 */
}

.circle {
    aspect-ratio: 1;
    height: 98vh;
    background-color: white;
    border-radius: 50%;
    position: relative;
    animation: spinoffPulse 7s infinite linear;
}

#ToFind {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 合并translate写法更简洁 */
    font-size: 8vh;
    cursor: pointer;
    /* 移除反向旋转动画 */
}

/* 其余.random元素样式保持不变 */
.random {
    transform: translateX(-50%) translateY(-50%);
    font-size: 6vh;
    cursor: pointer;
}

#random1 {
    position: absolute;
    top: 18%;
    left: 17%;
}

#random2 {
    position: absolute;
    top: 3%;
    left: 50%;
}

#random3 {
    position: absolute;
    top: 18%;
    left: 83%;
}

#random4 {
    position: absolute;
    top: 50%;
    left: 97%;
}

#random5 {
    position: absolute;
    top: 82%;
    left: 83%;
}

#random6 {
    position: absolute;
    top: 97%;
    left: 50%;
}

#random7 {
    position: absolute;
    top: 82%;
    left: 17%;
}

#random8 {
    position: absolute;
    top: 50%;
    left: 3%;
}

@keyframes spinoffPulse {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

JS代码无需修改

方案二：保留DOM结构，修复反向旋转逻辑 #

如果不想调整DOM结构，可以修正#ToFind的transform顺序，确保反向旋转能抵消父容器的旋转。因为CSS transform是按顺序生效的，父容器的rotate会先作用，子元素需要先做反向rotate，再做translate居中。

修改后的#ToFind CSS #

#ToFind {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 先执行反向旋转，再执行居中偏移，顺序不能反 */
    transform: rotate(-360deg) translate(-50%, -50%);
    animation: counterPulse 7s infinite linear;
    font-size: 8vh;
    cursor: pointer;
}

@keyframes counterPulse {
    0% {transform: rotate(0deg) translate(-50%, -50%);}
    100% {transform: rotate(-360deg) translate(-50%, -50%);}
}

原理说明 #

父容器.circle的旋转会传递给子元素，通过让#ToFind执行与父容器方向相反、速度相同的旋转，刚好抵消父容器的旋转效果，同时保持居中位置。

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