DEV Community

Cover image for 3d Image Slider using HTML & CSS
Shantanu Jana
Shantanu Jana

Posted on • Edited on

3d Image Slider using HTML & CSS

#html #css #webdev #beginners

In this article, you will learn how to create 3d Image Slider using only HTML and CSS.

3d Image Slider is a modern image gallery that helps to organize many images beautifully. It enhances the beauty of the website as well as enhances user satisfaction a lot.

If you have knowledge of basic HTML and CSS then you can easily create a 3D Carousel slider by watching this tutorial.

Below I have shared the complete tutorial for creating this 3D image slider.

Step 1: Design the web page

I designed the webpage using the CSS code below.



body {
  margin: 0;
  background: #EEE;
  user-select: none;
  font-family: sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

Design the web page

Step 2: Create the basic structure

Now I have created a basic structure of the image slider. Slide height: 32vw and width 50%. I used transform-style: preserve-3d to make it 3d.



<section id="slider">

</section>
Enter fullscreen mode Exit fullscreen mode 


#slider {
  position: relative;
  width: 50%;
  height: 32vw;
  margin: 150px auto;
  font-family: 'Helvetica Neue', sans-serif;
  perspective: 1400px;
  transform-style: preserve-3d;
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Create a carousel in the slider

Now I have created five radio buttons for five images. As I said before, there is a carousel to change the images. I am using the radio button to make those carousels.



  <input type="radio" name="slider" id="s1" checked>
  <input type="radio" name="slider" id="s2">
  <input type="radio" name="slider" id="s3">
  <input type="radio" name="slider" id="s4">
  <input type="radio" name="slider" id="s5">
Enter fullscreen mode Exit fullscreen mode 


input[type=radio] {
  position: relative;
  top: 108%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: 0 15px 0 0;
  opacity: 0.4;
  transform: translateX(-83px);
  cursor: pointer;
}


input[type=radio]:nth-child(5) {
  margin-right: 0px;
}

input[type=radio]:checked {
  opacity: 1;
}
Enter fullscreen mode Exit fullscreen mode

Create a carousel in the slider

Step 4: Add images to 3d Image Slider

Now I just added the images to the slider. If you notice, you will understand that I have used an id in every image here. This will serve as the identity of the for and id images.



  <label for="s1" id="slide1"><img src="img1.jpg" alt=""></label>
  <label for="s2" id="slide2"><img src="img2.jpg" alt=""></label>
  <label for="s3" id="slide3"><img src="img3.jpg" alt=""></label>
  <label for="s4" id="slide4"><img src="img4.jpg" alt=""></label>
  <label for="s5" id="slide5"><img src="img5.jpg" alt=""></label>
Enter fullscreen mode Exit fullscreen mode 


#slider label,
#slider label img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  color: white;
  font-size: 70px;
  font-weight: bold;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 400ms ease;
}
Enter fullscreen mode Exit fullscreen mode

Add images to 3d Image Slider

Step 5: Convert slider to 3D using CSS

I have implemented the image change using the following CSS code and arranged the images in 3d format.

For center image:



#s1:checked ~ #slide1,
 #s2:checked ~ #slide2,
  #s3:checked ~ #slide3,
   #s4:checked ~ #slide4,
    #s5:checked ~ #slide5 {
  box-shadow: 0 13px 26px rgba(0,0,0, 0.3), 0 12px 6px rgba(0,0,0, 0.2);
  transform: translate3d(0%, 0, 0px);
}
Enter fullscreen mode Exit fullscreen mode

For next image 1:



#s1:checked ~ #slide2,
 #s2:checked ~ #slide3,
  #s3:checked ~ #slide4,
   #s4:checked ~ #slide5,
    #s5:checked ~ #slide1 {
  box-shadow: 0 6px 10px rgba(0,0,0, 0.3), 0 2px 2px rgba(0,0,0, 0.2);
  transform: translate3d(20%, 0, -100px);
}
Enter fullscreen mode Exit fullscreen mode

For next image 1

For next image 2:



#s1:checked ~ #slide3,
 #s2:checked ~ #slide4,
  #s3:checked ~ #slide5,
   #s4:checked ~ #slide1,
    #s5:checked ~ #slide2 {
  box-shadow: 0 1px 4px rgba(0,0,0, 0.4);
  transform: translate3d(40%, 0, -250px);
}
Enter fullscreen mode Exit fullscreen mode

For next image 2
For prev image 1:



#s1:checked ~ #slide5,
 #s2:checked ~ #slide1,
  #s3:checked ~ #slide2,
   #s4:checked ~ #slide3,
    #s5:checked ~ #slide4 {
  box-shadow: 0 6px 10px rgba(0,0,0, 0.3), 0 2px 2px rgba(0,0,0, 0.2);
  transform: translate3d(-20%, 0, -100px);
}
Enter fullscreen mode Exit fullscreen mode

For prev image 1

For Prev image 2:



#s1:checked ~ #slide4,
 #s2:checked ~ #slide5,
  #s3:checked ~ #slide1,
   #s4:checked ~ #slide2,
    #s5:checked ~ #slide3 {
  box-shadow: 0 1px 4px rgba(0,0,0, 0.4);
  transform: translate3d(-40%, 0, -250px);
}
Enter fullscreen mode Exit fullscreen mode

For Prev image 2
Hope you have the tutorial above, you know how I made this 3d Image Slider with Carousel. If there is any difficulty then you can definitely let me know by commenting.

Related Post:

  1. Responsive Footer HTML CSS
  2. International Schools in Pune
  3. Simple Stopwatch using JavaScript
  4. Preschools in Whitefield
  5. javaScript Password Generator
  6. Best International Schools in Hyderabad
  7. Sidebar Menu Using HTML CSS

You can visit my blog for more tutorials like this.
https://www.foolishdeveloper.com/

Top comments (1)

Collapse
 
farouk15160 profile image
farouk15160 •

First of all ,good job and thank you :) .
secondly , i would like to know how you could use the same way but instead of 5 images and 5 static images , i want to link it with a changeable backend so they could be 10 , 15 ,20 or more photos , am using in my project HTML ,CSS and JS .

Read next

olga_tash profile image

SVAR Gantt: New Open Source, Interactive Gantt Chart for React

Olga T. -

nevodavid profile image

I built a social media scheduling tool and open-sourced it 🤯

Nevo David -

chiragagg5k profile image

How a Viral Tweet Landed Me Multiple Job Interviews

Chirag Aggarwal -

gladiatorsbattle profile image

Transforming the Wall of Text: Modern Design with Glassmorphism, CSS Animations, and Typography

Gladiators Battle -