/* https://www.cssscript.com/css-3d-cube-slider/ */

.slider {
  --s: 50px; /* Taille du cube */
  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  transform-style: preserve-3d; /* Activer l'effet 3D */
  perspective: (calc(2*var(--s))); /* Définir la perspective */
  animation: rotate-horizontal 2.5s infinite cubic-bezier(0.42, 0, 0.58, 1); /* Animation fluide */
}

.slider img {
  grid-area: 1/1;
  width: 100%;
  height: 100%;
  object-fit: cover; /* S'assurer que l'image couvre toute la face */
  position: absolute; /* Fixer chaque face au centre */
  backface-visibility: hidden; /* Masquer les faces arrière */
  transform: var(--_t, none); /* Transformation individuelle pour chaque face */
}

.slider img:nth-child(1) { --_t: translateZ(calc(var(--s) / 2)); } /* Face avant */
.slider img:nth-child(2) { --_t: rotateY(90deg) translateZ(calc(var(--s) / 2)); } /* Face droite */
.slider img:nth-child(3) { --_t: rotateY(180deg) translateZ(calc(var(--s) / 2)); } /* Face arrière */
.slider img:nth-child(4) { --_t: rotateY(-90deg) translateZ(calc(var(--s) / 2)); } /* Face gauche */
.slider img:nth-child(5) { --_t: rotateX(90deg) translateZ(calc(var(--s) / 2)); } /* Face supérieure */
.slider img:nth-child(6) { --_t: rotateX(-90deg) translateZ(calc(var(--s) / 2)); } /* Face inférieure */

@keyframes rotate-horizontal {
  0% {
    transform: rotateY(0deg);
  }
  25% {
    transform: rotateY(90deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  75% {
    transform: rotateY(270deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}