CARRUSEL DE IMÁGENES 3D GIRATORIO

CARRUSEL DE IMÁGENES 3D GIRATORIO .

Así quedaría

<div class="containercarrusel3d">
  <div id="carrusel3d">
   <figure><img src="URL IMAGEN" height="116" width="186"></figure>
   <figure><img src="URL IMAGEN" height="116" width="186"></figure>
   <figure><img src="URL IMAGEN" height="116" width="186"></figure>
   <figure><img src="URL IMAGEN" height="116" width="186"></figure>
   <figure><img src="URL IMAGEN" height="116" width="186"></figure>
   <figure><img src="URL IMAGEN" height="116" width="186"></figure>
   <figure><img src="URL IMAGEN" height="116" width="186"></figure>
   <figure><img src="URL IMAGEN" height="116" width="186"></figure>
   <figure><img src="URL IMAGEN" height="116" width="186"></figure>
  </div>
 </div>

<style>
.containercarrusel3d{
 margin: 4% auto;
 width: 210px;
 height: 140px;
 position: relative;
 perspective: 1000;
}
#carrusel3d{
 width: 100%;
 height: 100%;
 position: absolute;
 transform-style: preserve-3d;
 animation: rotation 20s infinite linear;
}
#carrusel3d:hover{
 animation-play-state: paused;
}
#carrusel3d figure{
 display: block;
 position: absolute;
 width: 186px;
 height: 116px;
 left: 10px;
 top: 10px;
 background: black;
 overflow: hidden;
 border: solid 5px black;
}
#carrusel3d figure:nth-child(1) { transform: rotateY(0deg) translateZ(288px);}
#carrusel3d figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px);}
#carrusel3d figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px);}
#carrusel3d figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px);}
#carrusel3d figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px);}
#carrusel3d figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px);}
#carrusel3d figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px);}
#carrusel3d figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px);}
#carrusel3d figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px);}

#carrusel3d img{
 -webkit-filter: grayscale(1);
 cursor: pointer;
 transition: all .5s ease;
}
#carrusel3d img:hover{
 -webkit-filter: grayscale(0);
  transform: scale(1.2,1.2);
}

@keyframes rotation{
 from{
  transform: rotateY(0deg);
 }
 to{
  transform: rotateY(360deg);
 }
}
</style>

Hay muchas maneras de presentar imagenes, de hecho, en este blog ya te he formulado unas cuantas.
Pues por si fuera poco, aqui te traigo otra alternativa muy interesante.

 Como ya lo digo en el titulo, se trata de una especie de noria animada en 3D y con zoom al pasar el cursor sobre ellas.

¿Como se consigue este diseño, con Javascript? Pues no, simplemente aplicando bien estilos CSS (CSS3), por lo que el tiempo de carga del carrusel sera muy reducido.

Para añadirlo a vuestro blog o web, simplemente copia este codigo y lo pones alli donde quieras que se vea.

El texto en color rojo lo sustituyes por las direcciones URL de las imagenes que desees poner (hasta un total de 9).

Fecha de la Publicación;07-08-2019

 Fuente; redeando

 Publicado por;