JSFiddle - React, Tailwind, and code Playground

HTML

<div class="section-2">
  <div class="item-2">
    <div class="imagens-giratórias imagem1">
      <img src="https://via.placeholder.com/432x864/fdc34f/FEFEFE?text=1">
      <img src="https://via.placeholder.com/432x864/3e72ff/FEFEFE?text=2">
      <img src="https://via.placeholder.com/432x864/222222/FEFEFE?text=3">
    </div>
  </div>
</div>

<div class="section-3">
  <div class="item-2">
    <div class="imagens-giratórias imagem1">
      <img src="https://via.placeholder.com/432x864/fdc34f/FEFEFE?text=1">
      <img src="https://via.placeholder.com/432x864/3e72ff/FEFEFE?text=2">
      <img src="https://via.placeholder.com/432x864/222222/FEFEFE?text=3">
    </div>
  </div>

CSS

.section-2 {
  float: left;
}

.section-3 {
  float: right;
}

.imagens-giratórias,
.imagens-giratórias-2 {
  perspective: 2000px;
  width: 40%;
}

.imagens-giratórias img,
.imagens-giratórias-2 img {
  display: none;
}

.imagens-giratórias.imagem1 img:nth-child(1),
.imagens-giratórias-2.imagem1 img:nth-child(1) {
  animation: rotação-1 5s linear 1 1s backwards;
}

.imagens-giratórias.imagem2 img:nth-child(2),
.imagens-giratórias-2.imagem2 img:nth-child(2) {
  animation: rotação-2 5s linear 1 1s backwards;
}

.imagens-giratórias.imagem3 img:nth-child(3),
.imagens-giratórias-2.imagem3 img:nth-child(3) {
  animation: rotação-3 5s linear 1 1s backwards;
}

.imagens-giratórias.imagem1 img:nth-child(1),
.imagens-giratórias.imagem2 img:nth-child(2),
.imagens-giratórias.imagem3 img:nth-child(3),
.imagens-giratórias-2.imagem1 img:nth-child(1),
.imagens-giratórias-2.imagem2 img:nth-child(2),
.imagens-giratórias-2.imagem3 img:nth-child(3) {
  display: block;
}

/* 0 ao 90 */

@keyframes rotação-1 {
  0% {
    transform: rotateY(-90deg);
  }

  50% {
    transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(90deg);
  }
}

/* 0 ao 90 */

@keyframes rotação-2 {
  0% {
    transform: rotateY(90deg);
  }

  50% {
    transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(-90deg);
  }
}

@keyframes rotação-3 {
  0% {
    transform: rotateY(-90deg);
  }

  50% {
    transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(90deg);
  }
}

JavaScript

var divs = document.querySelectorAll('.imagens-giratórias');
var contador = 1;

var mostrarPróximo = function(div) {
  contador++;
  if (contador > 3) contador = 1;
  div.classList.remove('imagem1', 'imagem2', 'imagem3')
  div.classList.add('imagem' + contador);
};


Array.from(divs).forEach(function(div, index) {
	var images = div.querySelectorAll('img');
  
  Array.from(images).forEach(function(img) {
    img.addEventListener('animationend', mostrarPróximo.bind(null, div));
  })
})