How to create a 3D rotation photo gallery with CSS

How to create a 3D Rotating photo gallery with CSS

How to create a 3D rotation photo gallery with CSS
How to create a 3D rotation photo gallery with CSS

How to create a 3D Rotating photo gallery with CSS – Image Gallery is a handy feature for Web applications. Essentially, image galleries help classify images in a user-friendly view on a webpage. The 3D effect makes the photo gallery more attractive and provides a better user interface. This Tutorial will show you how to create a 3D photo gallery using CSS only.

There are many jQuery plugins available to create 3D photo galleries. But 3rd party plugins increase the size of Web pages that will affect page-load websites. So, if you want to create a 3D image gallery with CSS without using plugins, this 3D CSS concept might help to do it quickly.

3D Carousel rotation with CSS

The following HTML and CSS used to create 3D rotating galleries.

HTML

HTML ini menyimpan semua gambar galeri foto 3D.

<div id="carousel">
    <figure><img src="gambar/img1.jpeg" alt=""></figure>
    <figure><img src="gambar/img2.jpeg" alt=""></figure>
    <figure><img src="gambar/img1.jpeg" alt=""></figure>
    <figure><img src="gambar/img2.jpeg" alt=""></figure>
    <figure><img src="gambar/img1.jpeg" alt=""></figure>
    <figure><img src="gambar/img2.jpeg" alt=""></figure>
    <figure><img src="gambar/img1.jpeg" alt=""></figure>
    <figure><img src="gambar/img2.jpeg" alt=""></figure>
    <figure><img src="gambar/img1.jpeg" alt=""></figure>
    <figure><img src="gambar/img2.jpeg" alt=""></figure>
</div>

CSS

The following CSS will add the rotation and 3D effects to the gallery and create a 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: white;
 overflow: hidden;
 border: solid 4px white;
}
#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:100%;
}
#carousel img:hover{
 -webkit-filter: grayscale(0);
  	transform: scale(1.2,1.2);
}

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

In the code, for example, creates a rotating gallery with the 3D transformation that will look like the capture below. Also, when hovering the image, the gallery rotation stops, and the image will be manipulated visually.

READ  Resolve Headsets or Headphones not detected on Windows 10

Conclusion

In the example script, a static image is displayed in the 3D photo Gallery. You can also view dynamic pictures in the gallery using PHP. Based on the number of images, the figure: nth-child (N) property needs to specified in CSS.


Demo & Download
That’s how to create a 3D rotation photo gallery with CSS easiest by AlgoritmComputer.com, share this article if useful.

Leave a Reply

Your email address will not be published. Required fields are marked *