Creating 3D Rotating Image Gallery with CSS

The image gallery is a very useful feature of the web application. Basically, image gallery helps to group the images in a user-friendly view in the web page. The 3D effect makes image gallery more attractive and provides a better user interface. This tutorial will show how you can create a 3D image gallery using pure CSS on the website.

There are many jQuery plugins are available for creating a 3D image gallery. But the 3rd party plugin increases the web page size which affects your website load time. So, if you want to make 3D image gallery with CSS without using a plugin, our CSS 3D concepts helps to do it easily.

3D Rotating Carousel with CSS

The following HTML and CSS is used to create a 3D rotating gallery.

HTML Code:
This HTML holds all the images of the 3D image gallery.

<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>

CSS Code:
The following CSS adds rotation and 3D effect to the gallery and make the 3D rotating gallery.

#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);
    }
}

The example code creates a rotating gallery with a 3D transformation like the below screen. Also, on hover, the image, gallery rotation will stop and the image will visually manipulate.

Conclusion

In the example script, the static images are showing on the 3D images gallery. You can also display the dynamic images in the 3D rotating image gallery using PHP. Based on the number of images, transform property of figure:nth-child(n) need to be specified in CSS.

See Also:Create Dynamic Image Gallery with jQuery, PHP & MySQL