定位旋转图标

Question

我有一段代码，我无法理解它，我需要帮助。

我有几个图标，我希望它们绕圈旋转，同时保持笔直并且不绕自身旋转。

代码如下所示：

<SkillsSection>
            <IndividualSkill>
              <GroupItemsSkill>
                <img src={imageIcons.html} />
                <label>HTML</label>
              </GroupItemsSkill>
            </IndividualSkill>
            <IndividualSkill>
            <GroupItemsSkill>
               <img src={imageIcons.javascript} />
               <label>Javascript</label>
               </GroupItemsSkill>
            </IndividualSkill>
            <IndividualSkill>
            <GroupItemsSkill>
               <img src={imageIcons.css} />
               <label>CSS</label>
               </GroupItemsSkill>
            </IndividualSkill>
            <IndividualSkill>
            <GroupItemsSkill>
               <img src={imageIcons.react} />
               <label>ReactJS</label>
               </GroupItemsSkill>
            </IndividualSkill>
            <IndividualSkill>
            <GroupItemsSkill>
               <img src={imageIcons.database} />
               <label>Database</label>
               </GroupItemsSkill>
            </IndividualSkill>
            <IndividualSkill>
            <GroupItemsSkill>
               <img src={imageIcons.nodejs} />
               <label>NodeJS</label>
               </GroupItemsSkill>
            </IndividualSkill>
            <IndividualSkill>
            <GroupItemsSkill>
               <img src={imageIcons.github} />
               <label>Github</label>
               </GroupItemsSkill>
            </IndividualSkill>
      </SkillsSection>

我使用像这样的样式组件来应用样式

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); }
  `

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

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);
}

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

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

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

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

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

`;

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

看起来像这样：

关于图标的位置，我想保持像 HTML5 图标一样笔直，完全不旋转。（查看图片）

我尝试过什么：

• 使用变换：translate(51px,250px);等等，但它们并不是完美的圆圈
• 使用 margin-top: 51px; margin-left: 250px 等等其他 7 个图标，但我似乎再次无法得到圆圈。

重点是，我希望它们在旋转时保持在圆的直径上，并且保持笔直（不围绕自身旋转）。

Answer 1

我找到了解决方案：

export const SkillsSection = styled(IntroSection)`
position: relative;
border-radius: 50%;
width: 500px;
height: 700px;
background: none;
animation: ${Circle} 5s linear infinite;
& ${IndividualSkill}:nth-child(1) {
    transform: translateY(0vw) translateX(16vw);
}

& ${IndividualSkill}:nth-child(2) {
    transform: translateY(11vw) translateX(11vw);
}

& ${IndividualSkill}:nth-child(3) {
    transform: translateY(16vw) translateX(0vw);
}

& ${IndividualSkill}:nth-child(4) {
    transform: translateY(11vw) translateX(-11vw);
}

& ${IndividualSkill}:nth-child(5) {
    transform: translateY(0vw) translateX(-16vw);
}

& ${IndividualSkill}:nth-child(6) {
    transform: translateY(-11vw) translateX(-11vw);
}

& ${IndividualSkill}:nth-child(7) {
    transform: translateY(-16vw) translateX(0vw);
}

& ${IndividualSkill}:nth-child(8) {
     transform: translateY(-11vw) translateX(11vw);
}
& ${IndividualSkill}:nth-child(9) {
    transform: translate(0px,0px) rotate(-100deg)

}

@media( max-width: 968px) {
    & ${IndividualSkill}:nth-child(1) {
        transform: translateY(0px) translateX(175px);
    }
    
    & ${IndividualSkill}:nth-child(2) {
        transform: translateY(125px) translateX(125px);
    }
    
    & ${IndividualSkill}:nth-child(3) {
        transform: translateY(175px) translateX(0px);
    }
    
    & ${IndividualSkill}:nth-child(4) {
        transform: translateY(125px) translateX(-125px);
    }
    
    & ${IndividualSkill}:nth-child(5) {
        transform: translateY(0px) translateX(-175px);
    }

    & ${IndividualSkill}:nth-child(6) {
        transform: translateY(-125px) translateX(-125px);
    }

    & ${IndividualSkill}:nth-child(7) {
        transform: translateY(-175px) translateX(0px);
    }

    & ${IndividualSkill}:nth-child(8) {
         transform: translateY(-125px) translateX(125px);
    }
}
`;