.rotate_part {
  width: 400px;
  height: 1400px;
  background-color: aqua;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 
}

.ring {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: white;
  border-radius: 50%;
  transform: rotateX(45deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: transform 1s, width 1s, height 1s;
}

.circle {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;

}


.red { 
  background-color: red;   
  top: -10%;}
.yellow { 
  background-color: yellow; 
  bottom: -20%;}
.blue { 
  background-color: blue; 
  left: -10%;}
.black { 
  background-color: black;
  right: -10%;}


.red { transform: rotateX(45deg); }

.yellow { 
  transform: rotateX(45deg);
  width: 100px;
  height: 100px;

  }
.blue { transform: rotateX(45deg); }
.black { transform: rotateX(45deg); }