3D Images Slideshow using HTML and CSS

A 3D slideshow for images is the right option while creating a creative website design. It not only attracts the users but also provide a good user experience while viewing your important images. If you want to create such 3D images slideshow using HTML and CSS, then this tutorial is for you.

Basically, a 3D slideshow requires JavaScript functions to play and pause on different events. But a general-purpose slideshow can be created using HTML and CSS only. Yes! it’s quite possible using CSS3 animations and¬† preserve-3d style for transformation.

The images in this slideshow float in a 3D view and rotate circularly. Besides this, users can also pause a specific image when hovering it. You can check it on the demo page.

HTML Structure for 3D Images Slideshow

The HTML structure for the 3D slideshow is very simple. You just need to create a section element with a class name "slideshow" and place your images inside the slider content div element. Wrap each image into a figure tag and define its class name "shadow". The complete HTML structure for 3D images slideshow is as follows:

<section class="slideshow">
   <div class="content">
      <div class="slider-content">
         <figure class="shadow"><img src="path/to/image0.jpg"></figure>
         <figure class="shadow"><img src="path/to/image1.jpg"></figure>
         <figure class="shadow"><img src="path/to/image2.jpg"></figure>
         <figure class="shadow"><img src="path/to/image3.jpg"></figure>
         <figure class="shadow"><img src="path/to/image4.jpg"></figure>
         <figure class="shadow"><img src="path/to/image5.jpg"></figure>
         <figure class="shadow"><img src="path/to/image6.jpg"></figure>
         <figure class="shadow"><img src="path/to/image7.jpg"></figure>
         <figure class="shadow"><img src="path/to/image8.jpg"></figure>
         <figure class="shadow"><img src="path/to/image9.jpg"></figure>
      </div>
   </div>
</section>

You can also add some text inside the figure element. Similarly, you are free to add any HTML (like heading, paragraphs, or images) inside the main wrapper of the slideshow.

The CSS Styles

In CSS, first of all, define the styles for the main container of the slideshow. Kee the left and right margin auto to align the slideshow in the center of the page. The slideshow container should have a fixed height as we need to define an absolute position for slider content. So, define its height as 700px and leave some space from the top by defining the padding-top value as 50px.

.slideshow{
  margin: 0 auto;
  padding-top: 50px;
  height: 700px;
  perspective: 1000px;
}

After that, specify styles for the slider content. Define perspective value, set auto value for margin, and keep its position as relative. In order to make it 3D specify "preserve-3d"¬†value for CSS transform-style property. Define the other styles as mentioned below and apply CSS "rotate" animation whose keyframes we’ll define at the end.

.content{
  margin: auto;
  width: 150px;
  perspective: 1000px;
  position:relative;
  padding-top: 80px;
  transform-style: preserve-3d;
}
.slider-content{
  width: 100%;
  position:absolute;
  float:right;
  animation: rotate 15s infinite linear;
  transform-style: preserve-3d;
}
.slider-content:hover{
  cursor: pointer;
  animation-play-state: paused;
}

In our slideshow HTML structure, the figure tag is the wrapper for images. You need to have a fixed value for the width and height of the figure element. So, define width and height value as 180px and 120px respectively. Here, the important thing is that the figure element should be animate-able, so keep its absolute position and keep the overflow hidden.

.slider-content figure{
  width:180px;
  height:120px;
  border:1px solid #555;
  overflow:hidden;
  position:absolute;
}
.slider-content img{
  image-rendering: auto;
  transition: all 300ms;
  width: 100%;
  height: 100%;
}

Zoom slideshow’s image on hover using CSS transform scale property. Also, define styles for shadow class as described below:

.slider-content img:hover{
   transform: scale(1.2); 
   transition: all 300ms; 
} 
.shadow{ 
   position: absolute; 
   box-shadow: 0px 0px 0px #000; 
}

Now, target each image using the CSS nth-child selector and set the different position by defining rotate and translate values for transform property.

.slider-content figure:nth-child(1){
  transform:rotateY(0deg) translateZ(300px);
}
.slider-content figure:nth-child(2){
  transform:rotateY(40deg) translateZ(300px);
}
.slider-content figure:nth-child(3){
  transform:rotateY(80deg) translateZ(300px);
}
.slider-content figure:nth-child(4){
  transform:rotateY(120deg) translateZ(300px);
}
.slider-content figure:nth-child(5){
  transform:rotateY(160deg) translateZ(300px);
}
.slider-content figure:nth-child(6){
  transform:rotateY(200deg) translateZ(300px);
}
.slider-content figure:nth-child(7){
  transform:rotateY(240deg) translateZ(300px);
}
.slider-content figure:nth-child(8){
  transform:rotateY(280deg) translateZ(300px);
}
.slider-content figure:nth-child(9){
  transform:rotateY(320deg) translateZ(300px);
}

At last, define the CSS keyframes for rotate animation as follows:

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

That’s all! I hope now you are able to create 3D images slideshow using HTML and CSS. If you have any questions or suggestions related to image slideshow, feel free to comment below.

You May Also Like

Leave a Comment