Positioning Spinning Icons

Question

I have a piece of code that I can't wrap my head around it and I need help.

I have a couple icons that I would like them to spin in a circle while they remain straight and don't rotate around themselves.

The code looks like this:

<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>

And I apply the style using styled-components like this

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

It looks like this:

Regarding icon's position I would like to remain as straight as the HTML5 icon one and not rotate at all.(check the picture)

What have I tried:

to use transform: translate(51px,250px); and so on but they are not in perfect circle
to use margin-top: 51px; margin-left: 250px and so on for the other 7 icons but once again I can't seem to get the circle.

The point is that I want them to stay on the diameter of the circle while they are spinning and they remain straight( not rotating around themselves ).

score 0 · Answer 1 · answered Aug 09 '23 at 15:47

I found a solution for it:

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

Positioning Spinning Icons

1 Answers1