Rotating images in a circular shape with text at bottom of the images

Question

I have attempted to adjust the images, but they appear to be rotated. I would like the images to be straight While rotation.

I would like the image and text to be straight While rotation.

Need this type of output with rotation in a circular shape please help to me to get this

<div class="container">
<img src="https://images.unsplash.com/photo-1617854818583-09e7f077a156?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="Image 1">
        <img src="https://images.unsplash.com/photo-1624555130581-1d9cca783bc0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=871&q=80" alt="Image 2">
        <img src="https://images.unsplash.com/photo-1480944657103-7fed22359e1d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032&q=80" alt="Image 3">
        <img src="https://images.unsplash.com/photo-1624555130581-1d9cca783bc0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=871&q=80" alt="Image 4">
        <img src="https://images.unsplash.com/photo-1480944657103-7fed22359e1d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032&q=80" alt="Image 5"></div>
   
   

   .container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  position: relative;
  animation: rotate 10s linear infinite;
}

.container img {
  position: absolute;
  width: 50px;
  height: 50px;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  margin-top: -25px;
  border-radius:3px;
}

.container img:nth-child(1) {
  transform: rotate(0deg) translate(75px) rotate(-0deg);
}

.container img:nth-child(2) {
  transform: rotate(72deg) translate(75px) rotate(-72deg);
}

.container img:nth-child(3) {
  transform: rotate(144deg) translate(75px) rotate(-144deg);
}

.container img:nth-child(4) {
  transform: rotate(216deg) translate(75px) rotate(-216deg);
}

.container img:nth-child(5) {
  transform: rotate(288deg) translate(75px) rotate(-288deg);
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

https://jsfiddle.net/krishna5544/ocaLrkz2/10

Answer 1

I would do it differently and use an animation where I will add the translation then I play with the delay to place the images.

I also switched to CSS grid to center and place all the images above each other

.container {
  --d: 10s; /* the duration*/
  
  display: grid;
  place-content: center; /* center everything */
  width: 200px;
  height: 200px;
}

.container img {
  grid-area: 1/1; /* all the images on the same area */
  width: 50px;
  aspect-ratio: 1;
  border-radius: 3px;
  animation: rotate var(--d) linear infinite;
  /* add a negative delay based on the index and number of image */
  animation-delay: calc(var(--i)*var(--d)/-5); 
}

.container img:nth-child(1) {--i: 1;}
.container img:nth-child(2) {--i: 2;}
.container img:nth-child(3) {--i: 3;}
.container img:nth-child(4) {--i: 4;}
.container img:nth-child(5) {--i: 5;}

@keyframes rotate {
  from {
    transform: rotate(0deg) translate(75px) rotate(-0deg);
  }
  to {
    transform: rotate(360deg) translate(75px) rotate(-360deg);
  }
}

<div class="container">
  <img src="https://images.unsplash.com/photo-1617854818583-09e7f077a156?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="Image 1">
  <img src="https://images.unsplash.com/photo-1624555130581-1d9cca783bc0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=871&q=80" alt="Image 2">
  <img src="https://images.unsplash.com/photo-1480944657103-7fed22359e1d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032&q=80" alt="Image 3">
  <img src="https://images.unsplash.com/photo-1624555130581-1d9cca783bc0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=871&q=80" alt="Image 4">
  <img src="https://images.unsplash.com/photo-1480944657103-7fed22359e1d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032&q=80" alt="Image 5">
  </div>