3d Image Slider using HTML & CSS
Tags: html, css, webdev, beginners
Published: 2021-09-23 16:24:21

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

[3d Image Slider](https://www.foolishdeveloper.com/2021/09/3d-image-slider-with-carousel-using.html) 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.

{% codepen https://codepen.io/fghty/pen/JjJZreX default-tab=result %}

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.
```css
body {
  margin: 0;
  background: #EEE;
  user-select: none;
  font-family: sans-serif;
}
```
![Design the web page](https://1.bp.blogspot.com/-ptEqJQv94mY/YUj9USEq70I/AAAAAAAABpU/VXLOaeywLSgOkPKYSZF8cGlSK0y3DDrPgCLcBGAsYHQ/s16000/Screenshot%2B%2528664%2529%2B%25286%2529.jpg)
 
### 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.
```html
<section id="slider">
 
</section>
```
```css
#slider {
  position: relative;
  width: 50%;
  height: 32vw;
  margin: 150px auto;
  font-family: 'Helvetica Neue', sans-serif;
  perspective: 1400px;
  transform-style: preserve-3d;
}
```
 
### 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.
```html
  <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">
```
```css
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;
}
```
![Create a carousel in the slider](https://1.bp.blogspot.com/-TWx4gZqcQAg/YUj9f5DJAQI/AAAAAAAABpY/4KASF8woC_0rCebjlQVfJU8LIAETEfxrACLcBGAsYHQ/s16000/Screenshot%2B%2528664%2529.jpg)
 
### 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.
```html
  <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>

```
```css
#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;
}
```
![Add images to 3d Image Slider ](https://1.bp.blogspot.com/-lG3WfmuOhko/YUj9mqkvOaI/AAAAAAAABpg/OYdGj94Rf7AyB5hi6XJ0xEYuMEU3YYeGACLcBGAsYHQ/s16000/Screenshot%2B%2528664%2529%2B%25281%2529.jpg)
 
### 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:
```css
#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);
}
```

For next image 1:

```css
#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);
}
```
![For next image 1](https://1.bp.blogspot.com/-66cgKet-_mo/YUj-Ee7xJKI/AAAAAAAABps/qIXtYr6j5TEJXScJQ2sh04X0FZPkJDJjACLcBGAsYHQ/s16000/Screenshot%2B%2528664%2529%2B%25282%2529.jpg)
 
For next image 2:

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

```
 ![For next image 2](https://1.bp.blogspot.com/-COejgu94iUw/YUj-MpNjzkI/AAAAAAAABpw/0YWCnq7RgQkiZetmma_krkQdjJFpyXMxQCLcBGAsYHQ/s16000/Screenshot%2B%2528664%2529%2B%25283%2529.jpg)
For prev image 1:

```css
#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);
}
```
![For prev image 1](https://1.bp.blogspot.com/-Z6JHdbVB-Xs/YUj-wbPWeoI/AAAAAAAABp4/0owYlX9fz2EAFdAz76H7lI_hHmp39PE3wCLcBGAsYHQ/s16000/Screenshot%2B%2528664%2529%2B%25284%2529.jpg)
 
For Prev image 2:

```css
#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);
}
```
![For Prev image 2](https://1.bp.blogspot.com/-BJHV8qXdN3c/YUj-4R3nHXI/AAAAAAAABp8/BOu9BhbIvRESo-B9NTlAr6ZB30svPhmeACLcBGAsYHQ/s16000/Screenshot%2B%2528664%2529%2B%25285%2529.jpg)
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.

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