求助：实现图标沿圆周旋转且自身不转动的布局方案

问题出在你给IndividualSkill设置的transform顺序有误，导致图标本身被带上了旋转角度，后续的反向动画也没法完美抵消。下面是两种有效的解决方法：

方法一：修正定位逻辑（推荐） #

通过调整transform的顺序，让图标先被放置到圆周位置，再抵消旋转角度保持直立，最后依靠父容器的旋转实现公转。

修改后的样式代码 #

export const IndividualSkill = styled.div`
position: absolute;
left: calc(50% - 25px);
top: calc(50% - 25px);
height: 50px;
width: 50px;
`;

const Circle = keyframes`
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
`

// 删掉InnerCircle这个反向动画，现在用不上了

export const SkillsSection = styled(IntroSection)`
position: relative;
border-radius: 50%;
width: 500px;
height: 500px;
background: none;
animation: ${Circle} 5s linear infinite;

& ${IndividualSkill}:nth-child(1) {
    transform: translateX(250px);
}

& ${IndividualSkill}:nth-child(2) {
    /* 关键：先转坐标系→移到圆周→把图标转回来保持直立 */
    transform: rotate(51deg) translateX(250px) rotate(-51deg);
}

& ${IndividualSkill}:nth-child(3) {
    transform: rotate(102deg) translateX(250px) rotate(-102deg);
}

& ${IndividualSkill}:nth-child(4) {
    transform: rotate(153deg) translateX(250px) rotate(-153deg);
}

& ${IndividualSkill}:nth-child(5) {
    transform: rotate(204deg) translateX(250px) rotate(-204deg);
}

& ${IndividualSkill}:nth-child(6) {
    transform: rotate(255deg) translateX(250px) rotate(-255deg);
}

& ${IndividualSkill}:nth-child(7) {
    transform: rotate(306deg) translateX(250px) rotate(-306deg);
}
`;

export const GroupItemsSkill = styled.div`
display: block;
background: none;
/* 删掉原来的InnerCircle动画 */
& img:nth-child(1) {
    width: 100%;
}
& label {
    margin: 2px;
    color: #1d2230;
    font-weight: bold;
}
`

为什么这样能行 #

CSS的transform是从右往左执行的，拿第二个图标举例：

1. 先执行rotate(-51deg)：把图标转回来，保持直立状态
2. 再执行translateX(250px)：沿着旋转后的X轴移动，刚好落到圆周的对应位置
3. 最后执行rotate(51deg)：把整个坐标系转回去，对齐父容器的方向

这样每个图标都精准落在圆周上，而且自身完全直立。父容器旋转时，所有图标会跟着绕中心公转，不会再出现自转的情况。

方法二：独立公转动画 #

如果不想旋转父容器，也可以给每个图标单独加公转动画，通过延迟动画起始时间让它们均匀分布：

export const IndividualSkill = styled.div`
position: absolute;
left: calc(50% - 25px);
top: calc(50% - 25px);
height: 50px;
width: 50px;
/* 每个图标自己绕中心公转 */
animation: ${Orbit} 5s linear infinite;
transform-origin: center;

/* 错开动画时间，让图标均匀分布在圆周上 */
&:nth-child(2) {
    animation-delay: -0.71s;
}
&:nth-child(3) {
    animation-delay: -1.42s;
}
&:nth-child(4) {
    animation-delay: -2.14s;
}
&:nth-child(5) {
    animation-delay: -2.85s;
}
&:nth-child(6) {
    animation-delay: -3.57s;
}
&:nth-child(7) {
    animation-delay: -4.28s;
}
`

const Orbit = keyframes`
  from { transform: rotate(0deg) translateX(250px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(250px) rotate(-360deg); }
`

// 父容器不需要旋转动画
export const SkillsSection = styled(IntroSection)`
position: relative;
border-radius: 50%;
width: 500px;
height: 500px;
background: none;
`;

export const GroupItemsSkill = styled.div`
display: block;
background: none;
& img:nth-child(1) {
    width: 100%;
}
& label {
    margin: 2px;
    color: #1d2230;
    font-weight: bold;
}
`

这个方案里，每个图标自己完成“绕中心转+保持直立”的动画，通过animation-delay让它们一开始就均匀分布在圆周上，效果和方法一一致。

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