body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  background: #6d6d6d;
  place-content: center;
  animation: b 10s infinite;
  justify-content: center;
  align-items: center;
}

.slider {
  --s: 250px; /* el tamaño */
  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  --_p: perspective(calc(3*var(--s)));
  animation: r 10s infinite cubic-bezier(.5,-0.5,.5,1.5);
}

.slider img {
  grid-area: 1/1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: var(--_t, ) translateZ(calc(var(--s)/2));
}

/*Rotación*/
.slider img:nth-child(2) {--_t: rotateX(-90deg)}
.slider img:nth-child(3) {--_t: rotateY( 90deg) rotate(-90deg)}
.slider img:nth-child(4) {--_t: rotateX(180deg) rotate( 90deg)}
.slider img:nth-child(5) {--_t: rotateX( 90deg) rotate( 90deg)}
.slider img:nth-child(6) {--_t: rotateY(-90deg)}

@keyframes r {
  0%,5%   {transform: var(--_p) rotateX( 0deg) rotate( 0deg) rotateY(  0deg) rotateX( 0deg) rotate( 0deg) rotateY(  0deg)}
  12%,20% {transform: var(--_p) rotateX(90deg) rotate( 0deg) rotateY(  0deg) rotateX( 0deg) rotate( 0deg) rotateY(  0deg)}
  30%,37% {transform: var(--_p) rotateX(90deg) rotate(90deg) rotateY(  0deg) rotateX( 0deg) rotate( 0deg) rotateY(  0deg)}
  45%,54% {transform: var(--_p) rotateX(90deg) rotate(90deg) rotateY(-90deg) rotateX( 0deg) rotate( 0deg) rotateY(  0deg)}
  60%,70% {transform: var(--_p) rotateX(90deg) rotate(90deg) rotateY(-90deg) rotateX(90deg) rotate( 0deg) rotateY(  0deg)}
  80%,87% {transform: var(--_p) rotateX(90deg) rotate(90deg) rotateY(-90deg) rotateX(90deg) rotate(90deg) rotateY(  0deg)}
  95%,to  {transform: var(--_p) rotateX(90deg) rotate(90deg) rotateY(-90deg) rotateX(90deg) rotate(90deg) rotateY(-90deg)}
}

/*cambio color de fondo*/
@keyframes b {
  0%,5%   {background: #008a12}
  12%,20% {background: #7a7a7a}
  30%,37% {background: #830000}
  45%,54% {background: #000000}
  60%,70% {background: #00380e}
  80%,87% {background: #390068}
  95%,to  {background: #008a12}
}

/*Título*/

  .titulo {
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  border: none;
  font: normal 48px/normal "Warnes", Helvetica, sans-serif;
  color: rgba(255,255,255,1);
  text-decoration: normal;
  justify-content: center;
  align-items: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  white-space: pre;
  text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #ff00de , 0 0 70px #ff00de , 0 0 80px #ff00de , 0 0 100px #ff00de ;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  position: relative;
  bottom: 2em;
}

.titulo:hover {
  text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #00ffff , 0 0 70px #00ffff , 0 0 80px #00ffff , 0 0 100px #00ffff ;
}