Creando una galería de imágenes 3D que rota con CSS

Una galería de imágenes es una característica muy útil de toda web que se precie. Básicamente, una galería de imágenes te ayuda a agrupar imágenes en una interfaz amigable para el usuario en una página web. El efecto 3D hará que la galería sea mucho más bonita y que acapare la atención del usuario. En este tutorial te mostraré cómo crear una galería de imágenes 3D utilizando unicamente CSS puro en tu sitio web.

Existen muchos plugins de jQuery que te permiten crear galerías de imágenes 3D, lo sé. Pero un plugin third party incrementará el tamaño de la web, y eso afectará negativamente a su tiempo de carga. Por lo que, si quieres crear una galería de imágenes 3D con CSS sin tener que utilizar un plugin, este CSS te ayudará bastante...

Carrusel 3D Rotativo con CSS

Utilizaremos el siguiente HTML y CSS para crear nuestra galería 3D rotativa.

Código HTML

Este HTML alberga todas las imágenes de nuestra galería de imágenes 3D.

<div id="carousel">
    <figure><img src="images/img1.jpg" alt=""></figure>
    <figure><img src="images/img2.jpg" alt=""></figure>
    <figure><img src="images/img3.jpg" alt=""></figure>
    <figure><img src="images/img4.jpg" alt=""></figure>
    <figure><img src="images/img5.jpg" alt=""></figure>
    <figure><img src="images/img6.jpg" alt=""></figure>
    <figure><img src="images/img7.jpg" alt=""></figure>
    <figure><img src="images/img8.jpg" alt=""></figure>
    <figure><img src="images/img9.jpg" alt=""></figure>
    <figure><img src="images/img10.jpg" alt=""></figure>
</div>

Código CSS

El siguiente CSS añade el efecto 3D y la rotación a nuestra galería. Solo tendrás que añadir este código a tu hoja de estilo para que la galería comience a funcionar.

#carousel{
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    animation: rotation 20s infinite linear;
}
#carousel:hover{
    animation-play-state: paused;
}
#carousel figure{
    display: block;
    position: absolute;
    width: 90%;
    height: 78%;
    left: 10px;
    top: 10px;
    background: black;
    overflow: hidden;
    border: solid 5px black;
}
#carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);}
#carousel figure:nth-child(2){ transform: rotateY(40deg) translateZ(288px);}
#carousel figure:nth-child(3){ transform: rotateY(80deg) translateZ(288px);}
#carousel figure:nth-child(4){ transform: rotateY(120deg) translateZ(288px);}
#carousel figure:nth-child(5){ transform: rotateY(160deg) translateZ(288px);}
#carousel figure:nth-child(6){ transform: rotateY(200deg) translateZ(288px);}
#carousel figure:nth-child(7){ transform: rotateY(240deg) translateZ(288px);}
#carousel figure:nth-child(8){ transform: rotateY(280deg) translateZ(288px);}
#carousel figure:nth-child(9){ transform: rotateY(320deg) translateZ(288px);}
#carousel figure:nth-child(10){ transform: rotateY(360deg) translateZ(288px);}
#carousel img{
    -webkit-filter: grayscale(1);
    cursor: pointer;
    transition: all .5s ease;
    width: 90%;
}
#carousel img:hover{
    -webkit-filter: grayscale(0);
    transform: scale(1.2,1.2);
}
@keyframes rotation{
    from{
        transform: rotateY(0deg);
    }
    to{
        transform: rotateY(360deg);
    }
}

Este código crea una galería que rota con un efecto sorprendente en 3D. Además decir, que al posarte sobre una imagen, la rotación de la galería se detendrá para que así la imagen se pueda visualizar y manipular.

Fuente: codexworld.com