3D Cube Image Slider | HTML, CSS And Javascript

6th September 2021

6053

Welcome to today’s tutorial. today we are going to learn how to create an image slider with 3d effect. The amazing thing about this is we don’t need any library or plugin to achieve this 3d effect. We obtain this look with the help of pure CSS.

The image slider consists of a 3d cube with an image on each of its faces. It also consists of two buttons to rotate the cube back and forth. For this tutorial, we need HTML, CSS and Javascript.

Video Tutorial:

I have a video version of this tutorial on my youtube channel. You can check it down below. I post a new video tutorial every alternate day; you can check them too.

Project Folder Structure:

Let us have quick look at the project folder structure. The project folder consists of 3 files. First is the HTML document named index.html. The next one is the stylesheet with the name style.css And the last one is the script file called script.js.

HTML:

Let us begin with the HTML file. Now copy the code provided below and paste it into your HTML document.

The HTML file consists of a div element with a class name wrapper. Inside this wrapper, we have a div called container. We use the wrapper div to centre the cube. Next, we have the image-cube div which contains four divs. The divs are named as – front, right, back and left. Also, each of these divs consists of an image.

Next, we a btns div which included two buttons – prev and next. We use font awesome icons for each of these icons.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3D Cube Slider</title>
    <!-- Font Awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wrapper">
      <div class="container">
        <div class="image-cube">
          <div class="front">
            <img src="image-1.jpg" />
          </div>
          <div class="right">
            <img src="image-2.jpg" />
          </div>
          <div class="back">
            <img src="image-3.jpg" />
          </div>
          <div class="left">
            <img src="image-4.jpg" />
          </div>
        </div>
      </div>
      <div class="btns">
        <button id="prev">
          <i class="fas fa-arrow-left"></i>
        </button>
        <button id="next">
          <i class="fas fa-arrow-right"></i>
        </button>
      </div>
    </div>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

CSS:

Now we come to the CSS. Copy the code below and paste it into your CSS section. We use a combination of transforms to create the cube shape. We have set the perspective of the container to 800px. If you want the effect to be stronger you can reduce the value of perspective.

The perspective origin is set to 50% so that the cube rotates on a flat plane. That is we only see the 4 sides of the cube.

We style the buttons using the flex layout and setting the justify-content to space-between.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #000000;
}
.wrapper {
  border: 1px solid #ffffff;
  height: 300px;
  width: 300px;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 800px;
  perspective-origin: 50%;
}
.image-cube {
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
  position: relative;
  transition: 2s;
}
.image-cube div {
  height: 300px;
  width: 300px;
  position: absolute;
}
img {
  width: 100%;
  transform: translateZ(0);
}
.front {
  transform: translateZ(150px);
}
.right {
  transform: rotateY(-270deg) translateX(150px);
  transform-origin: 100% 0;
}
.back {
  transform: translateZ(-150px) rotateY(180deg);
}
.left {
  transform: rotateY(270deg) translateX(-150px);
  transform-origin: 0 50%;
}
.btns {
  margin-top: 80px;
  display: flex;
  justify-content: space-between;
}
.btns button {
  background-color: transparent;
  color: #ffffff;
  border: 3px solid #ffffff;
  padding: 8px 40px;
  border-radius: 30px;
  font-size: 20px;
  cursor: pointer;
}

Javascript:

Now to add functionality to our slider we use javascript. We target the image cube and the buttons and assign them to variables. We set the initial position of the cube to 0 (0 deg).

Next, we add on click event listeners to each of these buttons. When the user clicks on the next button 90deg is subtracted from the pos variable and now this variable is used to rotate the cube. Similarly when we click on the prev button 90deg is added to the pos variable and the resultant value is used to the cube over the Y-axis.

let cube = document.querySelector(".image-cube");
let btnNext = document.getElementById("next");
let btnPrev = document.getElementById("prev");

let pos = 0;

btnNext.addEventListener("click", () => {
  pos -= 90;
  cube.style.transform = `rotateY(${pos}deg)`;
});
btnPrev.addEventListener("click", () => {
  pos += 90;
  cube.style.transform = `rotateY(${pos}deg)`;
});

If you have any issues in creating this image slider you can download the source code by clicking the ‘download code’ button below. I would love to hear your suggestions and feedback, so please comment on them below.
Images used in this code are from Unsplash.

Download Code