Create a 3D Image Slideshow using HTML, CSS & JS
Tags: webdev, css, html, javascript
Published: 2020-06-30 12:53:24

In this article, you will learn how to create an amazing 3D image slideshow on the web using just HTML, CSS and JavaScript which you can use in your personal websites to render images beautifully.

# **HTML**

In our HTML file, we will primarily have a *container* div that encloses three other divs that will mark the three rotating sections of our image. A *cube* class is assigned to each of these divs which will behave as independent cubes rotated along a common axis (Like a Rubix cube but cut only along one side). The *face* class will depict the regions of the cube where the image is held.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Cube</title>
</head>
<body>

    <div class="container">
        <div class="viewport">
            <div class="control left-arrow"><i class="fas fa-arrow-left"></i></div>
            <div class="cube cube-1">
                <div class="face front"></div>
                <div class="face back"></div>
                <div class="face top"></div>
                <div class="face bottom"></div>
                <div class="face left"></div>
                <div class="face right"></div>
            </div>
            <div class="cube cube-2">
                <div class="face front"></div>
                <div class="face back"></div>
                <div class="face top"></div>
                <div class="face bottom"></div>
                <div class="face left"></div>
                <div class="face right"></div>
            </div>
            <div class="cube cube-3">
                <div class="face front"></div>
                <div class="face back"></div>
                <div class="face top"></div>
                <div class="face bottom"></div>
                <div class="face left"></div>
                <div class="face right"></div>
            </div>
            <div class="control right-arrow"><i class="fas fa-arrow-right"></i></div>
            <div class="control play-pause"><i class="fas fa-play"></i></div>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>
```

# **CSS**

We will provide our basic styles to the body, background and the viewport. Here is where the high-tech CSS wizard skills come into picture along with some amount of maths. The CSS file is provided below and I think it is pretty much self-explanatory. Create a folder called *img* and save some images in it with the name used in the CSS file.

```css
* {
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .8)), url(images/bg.jpg) no-repeat;
    background-size: cover;
}

.viewport {
    height: 21vw;
    width: 42vw;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    perspective: 1300px;
}

.viewport::after {
    width: 120%;
    height: 20%;
    top: 140%;
    left: -10%;
    content: '';
    position: absolute;
    background-color: #000;
    z-index: -1;
    filter: blur(50px);
}

.cube {
    width: 100%;
    height: 33.3333333%;
    transform-style: preserve-3d;
    position: relative;
}

.cube-1 {
    transition: transform .4s;
}

.cube-2 {
    z-index: 10;
    transition: transform .4s .2s;
}

.cube-3 {
    transition: transform .4s .4s;
}

.face {
    width: 100%;
    height: 100%;
    position: absolute;
}

.front {
    transform: translateZ(21vw);
}

.cube-1 .front {
    background: url(images/slide-img-1.jpg) no-repeat 50% 0;
    background-size: cover;
}

.cube-2 .front {
    background: url(images/slide-img-1.jpg) no-repeat 50% -7vw;
    background-size: cover;
}

.cube-3 .front {
    background: url(images/slide-img-1.jpg) no-repeat 50% -14vw;
    background-size: cover;
}

.back {
    transform: translateZ(-21vw) rotateY(180deg);
}

.cube-1 .back {
    background: url(images/slide-img-2.jpg) no-repeat 50% 0;
    background-size: cover;
}

.cube-2 .back {
    background: url(images/slide-img-2.jpg) no-repeat 50% -7vw;
    background-size: cover;
}

.cube-3 .back {
    background: url(images/slide-img-2.jpg) no-repeat 50% -14vw;
    background-size: cover;
}

.left {
    transform: translateX(-21vw) rotateY(-90deg);
}


.cube-1 .left {
    background: url(images/slide-img-3.jpg) no-repeat 50% 0;
    background-size: cover;
}

.cube-2 .left {
    background: url(images/slide-img-3.jpg) no-repeat 50% -7vw;
    background-size: cover;
}

.cube-3 .left {
    background: url(images/slide-img-3.jpg) no-repeat 50% -14vw;
    background-size: cover;
}

.right {
    transform: translateX(21vw) rotateY(90deg);
}


.cube-1 .right {
    background: url(images/slide-img-4.jpg) no-repeat 50% 0;
    background-size: cover;
}

.cube-2 .right {
    background: url(images/slide-img-4.jpg) no-repeat 50% -7vw;
    background-size: cover;
}

.cube-3 .right {
    background: url(images/slide-img-4.jpg) no-repeat 50% -14vw;
    background-size: cover;
}

.top {
    height: 42vw;
    background-color: #111;
    transform: translateY(-21vw) rotateX(90deg);
}

.bottom {
    height: 42vw;
    background-color: #111;
    transform: translateY(-14vw) rotateX(-90deg);
}

.control {
    width: 40px;
    height: 40px;
    align-items: center;
    color: #fff;
    position: absolute;
    border-radius: 100%;
    transform: translate(-50%, -50%);
    border: 1px solid #fff;
    background-color: rgba(59, 52, 50, .7);
    display: flex;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: background-color .3s;
}

.control:hover {
    background-color: rgba(42, 38, 36, .8);
}

.control i {
    pointer-events: none;
}

.left-arrow {
    top: 50%;
    left: -35%;
}

.right-arrow {
    top: 50%;
    left: 135%;
}

.play-pause {
    top: 140%;
    left: 120%;
}
```

# **JavaScript**

The javascript part of this project will handle the initiation of the rotation and the little play and pause button in the bottom of the page that is responsible for automating the slide show after a set amount of time interval.

```javascript
const rotate = () => {
  const cubes = document.querySelectorAll(".cube");

  Array.from(cubes).forEach(
    (cube) => (cube.style.transform = `rotateY(${x}deg)`)
  );
};

const changePlayPause = () => {
  const i = document.querySelector(".play-pause i");
  const cls = i.classList[1];
  if (cls === "fa-play") {
    i.classList.remove("fa-play");
    i.classList.add("fa-pause");
  } else {
    i.classList.remove("fa-pause");
    i.classList.add("fa-play");
  }
};

let x = 0;
let bool = false;
let interval;

const playPause = () => {
  if (!bool) {
    interval = setInterval(() => {
      x -= 90;
      rotate();
    }, 3000);
    changePlayPause();
    bool = true;
  } else {
    clearInterval(interval);
    changePlayPause();
    bool = false;
  }
};

document.querySelector(".left-arrow").addEventListener("click", () => {
  x += 90;
  rotate();
  if (bool) {
    playPause();
  }
});

document.querySelector(".left-arrow").addEventListener("mouseover", () => {
  x += 25;
  rotate();
});

document.querySelector(".left-arrow").addEventListener("mouseout", () => {
  x -= 25;
  rotate();
});

document.querySelector(".right-arrow").addEventListener("click", () => {
  x -= 90;
  rotate();
  if (bool) {
    playPause();
  }
});

document.querySelector(".right-arrow").addEventListener("mouseover", () => {
  x -= 25;
  rotate();
});

document.querySelector(".right-arrow").addEventListener("mouseout", () => {
  x += 25;
  rotate();
});

document.querySelector(".play-pause").addEventListener("click", () => {
  playPause();
});
```

# **Result**

By now, I know you are all wondering, "What could these enormous and gigantic set of code possibly do?". Please have a look at the gif provided below to get a clear cut idea of how all these codes work together.


<img src="https://dev-to-uploads.s3.amazonaws.com/i/6q4s6oyrimwrsn6y9j9t.gif">


Thank you for reading this article. The entire project is available on [GitHub](https://github.com/K-G-PRAJWAL/HTML-CSS-Projects/tree/master/Cube%20SlideShow). For any queries feel free to contact me on my [LinkedIn](https://www.linkedin.com/in/k-g-prajwal-a6b3b517a/).


***Thank You!***