Positioning elements in a half-circle in correct way around Blue

Question

I have this guy Blue (the blue character) and I want to add some elements in the half-circle around him.

each element is a container of an image and a span of text that should be positioned below the image.

I have tried this but as you see the elements rotate this way and each of spans not positioned correctly.

How can I do this?

.blueAnime {
  width: 30vw;
  height: auto;
}

.blueContainer{
  display: flex;
  justify-content: center;
  width:100%;
  padding-top:600px;
}



.coins {
  width: 5vw;
  height: auto;
}

.circle {
    width: 300px;
    height: 30px;
    display: block;
    position: absolute;
    top: 110%;
    left: 50%;
    margin: -15px;
}

.one { transform: rotate(-0deg) translate(40vw); }
.two { transform: rotate(-20deg) translate(40vw); }
.three { transform: rotate(-40deg) translate(40vw); }
.four { transform: rotate(-60deg) translate(40vw); }
.five { transform: rotate(-80deg) translate(40vw); }
.six { transform: rotate(-100deg) translate(40vw); }
.seven { transform: rotate(-120deg) translate(40vw); }
.eight { transform: rotate(-140deg) translate(40vw); }
.nine { transform: rotate(-160deg) translate(40vw); }
.ten { transform: rotate(-180deg) translate(40vw); }




 


 


    

    
        
        This is going to be below each image
    

    
        
        This is going to be below each image
    

    
        
        This is going to be below each image
    

    
        
        This is going to be below each image
    

    
        
        This is going to be below each image
    

    
        
        This is going to be below each image
    

    
        
        This is going to be below each image
    

    
        
        This is going to be below each image
    

    
        
        This is going to be below each image
    

    
        
        This is going to be below each image

Scroll down to see the Blue.

user_830905 · Answer

First of all, let's set up the img and span correctly. A single .circle element should look like this:

.circle {
  display: inline-block;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.circle > img {
  display: block;
  width: 30px; height: 30px;
  margin: 0 auto;
}


  
  text below

Now that we have a single .circle element set up we can define many of them, and rotate them appropriately:

.blueAnime { width: 30vw; height: auto; }
.blueContainer{
  display: flex;
  justify-content: center;
  width:100%;
  padding-top:300px;
}
.circle {
  display: inline-block;
  position: absolute;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.circle > img {
  display: block;
  width: 30px; height: 30px;
  margin: 0 auto;
}
.one { transform: rotate(-0deg) translate(40vw); }
.two { transform: rotate(-20deg) translate(40vw); }
.three { transform: rotate(-40deg) translate(40vw); }
.four { transform: rotate(-60deg) translate(40vw); }
.five { transform: rotate(-80deg) translate(40vw); }
.six { transform: rotate(-100deg) translate(40vw); }
.seven { transform: rotate(-120deg) translate(40vw); }
.eight { transform: rotate(-140deg) translate(40vw); }
.nine { transform: rotate(-160deg) translate(40vw); }
.ten { transform: rotate(-180deg) translate(40vw); }


    

    Text below
    Text below
    Text below
    Text below
    Text below
    Text below
    Text below
    Text below
    Text below
    Text below

Note that the .circle elements still become rotated - we want them all exactly level, as a non-rotated element would be. We can achieve this by using rotate(n) before and after the translate property! Matrix operations produce different results depending on their order. Or goal here will be to "unrotate" the .circle element after translating and rotating it. Essentially the first rotation both visually rotates the .circle, and influences the direction of the upcoming transform. The second rotation, however, only visually "unrotates" the .circle, and since it is not followed by any transform operation, the center of the .circle will stay put.

.blueAnime { width: 30vw; height: auto; }
.blueContainer{
  display: flex;
  justify-content: center;
  width: 100%;
  padding-top: 300px;
}
.circle {
  display: inline-block;
  position: absolute;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.circle > img {
  display: block;
  width: 30px; height: 30px;
  margin: 0 auto;
}
.one { transform: rotate(-0deg) translate(40vw) rotate(0deg); }
.two { transform: rotate(-20deg) translate(40vw) rotate(20deg); }
.three { transform: rotate(-40deg) translate(40vw) rotate(40deg); }
.four { transform: rotate(-60deg) translate(40vw) rotate(60deg); }
.five { transform: rotate(-80deg) translate(40vw) rotate(80deg); }
.six { transform: rotate(-100deg) translate(40vw) rotate(100deg); }
.seven { transform: rotate(-120deg) translate(40vw) rotate(120deg); }
.eight { transform: rotate(-140deg) translate(40vw) rotate(140deg); }
.nine { transform: rotate(-160deg) translate(40vw) rotate(160deg); }
.ten { transform: rotate(-180deg) translate(40vw) rotate(180deg); }


    

    Text below
    Text below
    Text below
    Text below
    Text below
    Text below
    Text below
    Text below
    Text below
    Text below

user_13368658 · Answer

.blueAnime {
  width: 30vw;
  height: auto;
}

.blueContainer{
  display: flex;
  justify-content: center;
  width:100%;
  padding-top:600px;
  position:relative;
}



.coins {
  width: 5vw;
  height: auto;
}

.circle {
    width: 300px;
    height: 30px;
    display: block;
    position: absolute;
    top: 80%;
    left: 30%;
    margin: -15px;
}

.one { transform: rotate(-0deg) translate(40vw); }
.two { transform: rotate(-20deg) translate(40vw); }
.three { transform: rotate(-40deg) translate(40vw); }
.four { transform: rotate(-60deg) translate(40vw); }
.five { transform: rotate(-80deg) translate(40vw); }
.six { transform: rotate(-100deg) translate(40vw); }
.seven { transform: rotate(-120deg) translate(40vw); }
.eight { transform: rotate(-140deg) translate(40vw); }
.nine { transform: rotate(-160deg) translate(40vw); }
.ten { transform: rotate(-180deg) translate(40vw); }




 


 


    

    
        
        This is going to be below each image
    

    
        
        This is going to be below each image
    

    
        
        This is going to be below each image
    

    
        
        This is going to be below each image
    

    
        
        This is going to be below each image
    

    
        
        This is going to be below each image
    

    
        
        This is going to be below each image
    

    
        
        This is going to be below each image
    

    
        
        This is going to be below each image
    

    
        
        This is going to be below each image

Add position:relative; to blueContainer class

.circle {    
    top: 80%;
    left: 30%;
}

please change top and left as you want

Positioning elements in a half-circle in correct way around Blue

2 Answers