body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

/*A continuación definimos el cuadrado que vamos a animar*/
.cuadrado {
  width: 40px;
  /*Anchura del cuadrado*/
  height: 40px;
  /*Altura del cuadrado*/
  background-color: #333;
  /*Color de fondo del cuadrado*/
  margin: 100px auto;
  animation: rotar-cuadrado 5s ease-in-out infinite;
  /*Definimos la animación: (nombre de la animación) (duración) (estilo de la función) (duración de la función) */
}

@keyframes rotar-cuadrado {

  /*Punto inicial de la animación*/
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    background-color: #333;
    scale: 1;
  }

  /*Punto intermedio de la animación*/
  50% {
    transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
    background-color: #fa0;
    scale: 2;
  }

  /*Punto final de la animación*/
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
    background-color: #333;
    scale: 1;
  }
}