Cómo crear un Carrusel 3D responsive

Tutorial: Carrusel 3D Responsive (Solo CSS)

En este tutorial aprenderás a crear un slider con efecto de profundidad 3D que se adapta automáticamente a pantallas móviles reduciendo su escala matemáticamente.

1. Estructura HTML

Copia este código y pégalo donde quieras que aparezca el carrusel:

<div class="slider">
  <div class="slider-img">
    <ul id="ul-parent">
      <li><img src="TU_IMAGEN_1.jpg" /></li>
      <li><img src="TU_IMAGEN_2.jpg" /></li>
      <li><img src="TU_IMAGEN_3.jpg" /></li>
      <li><img src="TU_IMAGEN_4.jpg" /></li>
    </ul>
  </div>
</div>

2. Estilos CSS y Animación

Este bloque incluye la lógica para escritorio y el Media Query que ajusta el tamaño para celulares:

<style>
* { margin:0; padding: 0; box-sizing: border-box; }
li { list-style: none; }

.slider {
    background: #dc3030;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.slider-img {
    width: 600px;
    height: 600px;
    padding: 30px 0;
    text-align: center;
}

.slider-img img { width: 100%; height: auto; }

#ul-parent {
    position: relative;
    perspective: 1000px;
    transform-style: preserve-3d;
    width: 100%;
}

#ul-parent li {
    position: absolute;
    width: 100%;
    top: 0; left: 0;
    animation-name: slider;
    animation-duration: 20s;
    animation-iteration-count: infinite; 
}

/* Tiempos de cada imagen */
#ul-parent li:nth-child(1) { animation-delay: -20s; }
#ul-parent li:nth-child(2) { animation-delay: -15s; }
#ul-parent li:nth-child(3) { animation-delay: -10s; }
#ul-parent li:nth-child(4) { animation-delay: -5s; }

/* Animación Escritorio */
@keyframes slider {
    0%,20% { transform: translateX(0); }
    25%,45% { transform: translateX(550px) translateZ(-300px) rotateY(30deg); }
    50%,70% { transform: translateZ(-500px); }
    75%,95% { transform: translateX(-550px) translateZ(-300px) rotateY(-30deg); }
    100% { transform: translateX(0); }
}

/* AJUSTE PARA MÓVIL */
@media screen and (max-width: 650px) {
    .slider-img { width: 300px; height: 350px; }
    #ul-parent li { animation-name: slider-mobile; }
}

@keyframes slider-mobile {
    0%,20% { transform: translateX(0); }
    25%,45% { transform: translateX(200px) translateZ(-150px) rotateY(30deg); }
    50%,70% { transform: translateZ(-250px); }
    75%,95% { transform: translateX(-200px) translateZ(-150px) rotateY(-30deg); }
    100% { transform: translateX(0); }
}
</style>