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.
Como podeis ver, el resultado esta bastante logrado, ¿no os parece?
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).
<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>
